目录
1、创建
2、Vue响应原理
3、路由传参
4、$nextTick的使用
5、keep-alive
6、什么是 vue 生命周期？有什么作用？
7、vue-router的导航守卫
8、vuex是什么？
9、delete和Vue.delete删除数组的区别
10、vue.install：插件
11、自定义事件的机制
12、自定义指令
13、v-on监听多个方法
14、vue常用修饰符
15、Vue-router跳转和location.href有什么区别
16、computed与methods的区别
17、computed和watch的区别
18、vue动态配置路由信息实现思路
19、vue与jQuery的区别
20、vue与react的区别
正文
1、创建
- cli2：npm i vue-cli -g；vue init webpack project
- cli3：npm i @vue/cli -g；vue create project；vue-cli3：配置文件vue.config.js需要手动创建。
2、Vue响应原理
- 借助于es5里的defineProperty对data属性进行劫持，当数据发生变化时，重新生成虚拟DOM结构，进行差异对比，最后进行DOM更新。
3、路由传参 原文链接
query要用path来引入，params要用name来引入
- 方式一：params（刷新当前页面不会丢失数据）动态路由
路由配置：例：path:'/detail/:id'
路由跳转：例：this.$router.push('/detail/10')
路由页面接收参数：例：this.$route.params.id
当前路由：例：localhost:8080/detail/10
- 方式二：params（刷新当前页面会丢失数据）
路由配置：例：path:'/detail';name:detail
路由跳转：例：this.$router.push({name:detail,params:{id:10}})
路由页面接收参数：例：this.$route.params.id
当前路由：例：localhost:8080/detail
- 方式三：query（刷新页面不会丢失数据）
路由配置：例：path:'/detail'
路由跳转：例：this.$router.push('/detail?id=10')
路由页面接收参数：例：this.$route.query.id
当前路由：例：localhost:8080/detail?id=10
4、$nextTick的使用
修改data的之后马上获取这个dom元素的值，是不能获取到更新后的值。需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
例：this.$nextTick(()=>{console.log(this.value)})
5、keep-alive 原文链接
keep-alive：是vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素。
- 生命周期钩子函数：
activated：进入缓存页面。
deactivated：离开缓存页面。 - 属性：
include：所包含的name属性组件会被缓存（注意是组件的name）。
exclude：所包含的name属性组件不会被缓存。 - 同样效果实现：在路由配置中设置：meta:{ keepAlive:true };
<keep-alive v-if='!this.$router.meta.keepAlive'></keep-alive>
6、什么是 vue 生命周期？有什么作用？
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会。（ps：生命周期钩子就是生命周期函数）例如，如果要通过某些插件操作DOM节点，如想在页面渲染完后弹出广告窗， 那我们最早可在mounted 中进行。
- beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法。
- created：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。
- beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的。
- mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行。
- beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步。
- updated：页面显示的数据和data中的数据已经保持同步了，都是最新的。
- beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁。
- destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
7、vue-router的导航守卫 原文链接
- 全局前置守卫：router.beforeEach。router.beforeEach((to,from,next)=>{})
- 全局解析守卫：router.beforeResolve。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
- 全局后置钩子：router.afterEach。router.afterEach((to,from)=>{})
- 路由独享的守卫：beforeEnter。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
- 组件内的守卫：
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
this.name = to.params.name
next()
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
}
8、vuex是什么？ 原文链接
vue框架的状态管理模式，集中管理了组件的状态和数据，这样我们可以清楚的知道哪一个数据被改变。
- 属性：
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。请求多次复用，可以写在actions里。原文链接
modules => 模块化Vuex
9、delete和Vue.delete删除数组的区别 原文链接
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。Vue.delete 直接删除了数组 改变了数组的键值。
10、vue.install：插件 原文链接
在js文件中规定了install方法，就可以向其他ui组件库那样。使用Vue.use()来全局使用。
11、自定义事件的机制
子组件使用this.$emit触发事件时，会在当前实例的事件中心去查找对应的事件，然后执行它。不过这个事件回调是在父组件的作用域里定义的，所以$emit里的参数会传递给父组件的回调函数，从而完成父子组件通信。
12、自定义指令 原文链接
- bind：只是创建好DOM元素，并没有真实插入到页面 -- 只调用一次，指令第一次绑定到元素时调用。
- inserted：节点插入DOM中时触发，代表节点已经存在于DOM中。
- 区别：inserted可以操作父节点。
13、v-on监听多个方法
例：<input type='text' v-on='{input:onInput,focus:onFocus,blur:onBlur}'/>
14、vue常用修饰符
- .stop：阻止冒泡。等同于js中的event.stopPropagation()。
- .prevent：阻止浏览器默认行为。等同于js中的event.preventDefault()。
- .capture：事件捕获。与事件冒泡方向相反，事件捕获由外向内。
- .self：只会触发自己范围内的事件，不包含子元素。
- .once：只会触发一次。
- .native：监听一个原生事件。router-link会阻止click事件，这时可以使用@click.native。
15、Vue-router跳转和location.href有什么区别
- 使用location.href='/url'来跳转，简单方便，但是刷新了页面；
- 使用history.pushState('/url')，无刷新页面，静态跳转；
- 引进router，然后使用router.push('/url')来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
- 其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。
16、computed与methods的区别 原文链接
- 相同点：都可以对data中的数据加工后再输出。
- 用法：computed计算属性的方式在用属性时不用加()；methods方式在使用时要像方法一样去用，必须加()。
- 缓存：computed计算属性只有当相关依赖发生变化时，才会执行；methods的每次调用都会执行。
17、computed和watch的区别
- computed：当一个属性受多个属性影响的时候，需要用到computed。例：购物车结算的时候。
- watch：当一条数据影响多条数据的时候，需要用到watch。例：页码切换。
18、vue动态配置路由信息实现思路
19、vue与jQuery的区别
- jQuery是使用选择器($)选取dom对象，对其进行赋值、取值、事件绑定等操作。其实和原生的html区别只在于更方便的选取和操作DOM对象，而数据和界面是在一起的。
- vue是通过vue对象将数据和view完全分开。对数据进行操作，不在需要引用相应的DOM对象，可以说数据和view是分离的。这就是传说中的MVVM。
20、vue与react的区别
- 区别：
数据响应原理：Vue依赖defineProperty对对象属性添加劫持。React调用setState方法通过发布订阅者模式达到视图的更新。
模板：Vue使用字符串模板。React使用jsx。
视图更新：在react中如果某个组件的状态发生改变，react会把此组件以及此组件的所有后代组件重新渲染，可以通过shouldComponentUpdate或者PureComponent减少不必要的更新。Vue中只更新状态发生变化的组件。 - 相同点: 都使用了虚拟DOM，都支持组件式开发，都提供了路由及集中状态管理模块。
