vue 核心知识点（一）

1. vue.js 的两个核心是什么？

数据驱动：viewmodel 保证数据和视图的一致性

组件系统

2. vue 的生命周期

created(创建后)：组件实例创建完成，属性已经绑定，数据对象data已存在；但dom未生成，$el 未存在

mounted(挂载后)：vue实例挂载完成，data.msg 成功渲染

updated（更新后）：当data发生变化后，会触发updated方法

destoryed(销毁后)：组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除dom监听和数据绑定，但dom结构依然存在

3. vuex 是什么，怎么使用，在哪种场景下使用

[图片上传失败...(image-d7bc62-1592017290038)]

一个实例化的Vuex.Store由 state , mutation , actions 三个属性组成； state 中保存着共有数据；通过 mutations中的方法改变 state 中的数据，且是同步的；异步的方法需要写在 actions 中，并通过 commit 到 mutations 中，才能更改 state 中的数据。

vuex 是vue程序使用的 状态管理模式 ，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

单页应用中组件之间的状态，音乐的播放、登录状态等......

4. vue 组件间的传参

父组件向子组件传参

子组件通过 props 方法接收数据

// 父组件
<template>
    <div id="father">
        <nav :form="info"></nav>
    </div>
</template>
<script>
import Nav from './components/Nav'

export default {
    components: {
        'nav': Nav
    },
    data() {
        return {
            info: 'lisi'
        }
    }
}
</script>

// 子组件
<template>
    <div id="son">
        <p>{{form}}</p>
    </div>
</template>
export default {
    data() {
        return {

        }
    },
    props: ['form']
}

子组件向父组件传递数据

子组件主要通过事件传递数据给父组件

// 子组件
<template>
    <div id="son">
        <input v-model="username" @change="setUser"/>
    </div>
</template>
<script>
export default {
    data() {
        return {
            username: ""
        }
    },
    methods: {
        setUser: function() {
            this.$emit('transferUser', this.username)
        }
    }
}
</script>

在 setUser 中，使用 $emit 来遍历 transferUser 事件，并返回 this.username 其中 transferUser 是一个自定义事件， this.username 通过这个事件传递给父组件

// 父组件
<template>
    <div id="father">
        <son @transferUser="getUser"></son>
        {{user}}
    </div>
</template>
<script>
import Son from './components/Son'
export default {
    data() {
        return {
            user: ''
        }
    },
    components: {
        "son": Son
    },
    methods: {
        getUser(msg){
            this.user = msg
        }
    }
}
</script>

在父组件中声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username getUser 方法中的 msg参数就是从子组件传递过来的 username

非父子组件间的数据传递

使用 vuex 或者从子组件传到父组件，再传到子组件

5. Vue 和 React 的区别

相同点

React 使用 JSX 语法，vue使用 .vue 的文件格式，两者都需要编译后使用
都是以组件的形式
都提供了钩子函数

不同点

React 依赖 虚拟DOM ，vue 使用的 DOM模板，React 采用的虚拟DOM 会对渲染出来的结果做 脏检查 ？？？
vue 在模板中提供了指令、过滤器等，可以方便、快捷地操作DOM

6. route 和 router 的区别；vue-router 是怎么传递参数的

route 是路由信息对象，包括 path , params , hash , query , fullPath , matched , name 等路由信息参数

router 是路由实例，包括了路由的跳转方法，钩子函数等

在 router.js 文件中配置 path 的地方动态传递参数 path: '/home/:id' ，然后在组件中通过 this.$route.params.id 获取
在 router-link 标签中传递参数，同样使用 this.$route.params 获取

<router-link :to={params:{x:1}} />

7. 事件修饰符

.stop ：阻止冒泡（阻止事件向上级DOM元素传递）

<template>
    <div id='home'>
            <div @click="outClick">
                <div @click="innerClick"></div>
            </div>
    </div>
</template>

<script>
export default {
    name: 'home',
        methods: {
            outClick() {
                console.log('this is outer');
            },
            innerClick() {
                console.log('this is inner');
            }
        }
}
</script>

点击内层 div 时：

this is inner this is outer

点击外层 div 时：

this is outer

修改内层 div：

<div @click.stop="innerClick"></div>

再次点击内层 div 时：

this is inner

.prevent ：阻止默认事件的发生；默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面，使用 .prevent 修饰符可以阻止这些事件的发生。

<a href="www.baidu.com" @click.prevent>百度</a>

.capture ：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

<template>
    <div id='home'>
            <div @click.capture="outClick">
                <div @click="innerClick">
                    <div @click="mostinnerClick"></div>
                </div>
            </div>
    </div>
</template>

// 点击最内层 div时，
// this is outer
// this is the most inner
// this is inner

有多个修饰符时：

<template>
    <div id='home'>
            <div @click.capture="outClick">
                <div @click.capture="innerClick">
                    <div @click="mostinnerClick"></div>
                </div>
            </div>
    </div>
</template>

// 点击最内层 div时，
// this is outer
// this is inner
// this is the most inner

.self ：将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。

<template>
    <div id='home'>
            <div @click="outClick">
                <div @click.self="innerClick">
                    <div @click="mostinnerClick"></div>
                </div>
            </div>
    </div>
</template>

// 点击最内层时
// this is the most self
// this is outer

.once ：设置事件只能触发一次，比如按钮的点击等。
.passive ：用于对DOM的默认事件进行性能优化，例如超出最大范围的滚动条滚动的方法，可以使用该修饰符进行加强。

8. 什么是 keep-alive

在组件切换的过程中将状态保留在内存中，防止重复渲染DOM，只会执行一次，不会被销毁。被 keep-alive 包裹的组件，没有 create和 beforeDestroyed等方法，但是有 activated 和 deactivated方法。

9. beforeDestroy 里面一般进行什么操作

beforeDestroy 是组件销毁之前执行的一个生命周期，在这个生命周期里，可以进行回调函数或定时器的清除，清除不用的dom元素