1、什么是vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2、vue生命周期总共有几个阶段？/ vue生命周期具体的名字和过程？
它可以总共分为8个阶段：beforeCreate创建前、created创建后, beforeMount载入前、mounted载入后，beforeUpdate更新前、updated更新后，beforeDestroy销毁前、destroyed销毁后。
3、vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
4、第一次页面加载会触发哪几个钩子？
会触发下面这几个beforeCreate, created, beforeMount, mounted 。
5、DOM 渲染在哪个周期中就已经完成？
DOM 渲染在 mounted 中就已经完成了。
6、简述每个周期具体适合哪些场景？
1）beforeCreate：可以在这加loading事件，在加载实例时触发。
2）created：初始化完成时的事件写在这里，如在这里结束loading，异步请求也适合在这里调用。
3）mounted：挂载元素，获取到dom节点。
4）updated：如果对数据统一处理，在这里写上相应的函数。
5）beforeDestroy：可以做一个确定停止事件的确认框。
7、Vue实现数据双向绑定
Vue实现数据双向绑定的原理：Object.defineProperty（）
vue实现数据双向绑定主要步骤：
（1)需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter。
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。
（2)compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
（3)Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是:
①在自身实例化时往属性订阅器(dep)里面添加自己
②自身必须有一个update()方法
③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。
（4)MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
8、js实现简单的双向绑定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
9、MVVM模式和MVC模式
MVVM模式是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model层代码数据模型，也是可以在Model中定义数据修改和操作的业务逻辑；View层代表UI组件，它负责将数据模型转化为UI展示出来，ViewModel是一个同步View和Model的对象。
在MVVM架构中，View和Model之间没有直接联系，通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此View数据变化会同步到Model中，而Model的数据变化也会立即反应到View上。
ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因开发者只需要关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由MVVM来统一管理。
主要是MVC中的Controller演变成为MVVM中的ViewModel。MVVM主要解决了MVC中大量的DOM操作使页面渲染性能下降，加载速度变慢，影响用户体验。和当Model频繁变化的时候，开发者需要主动更新到View。
10、双向绑定的原理
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter/getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体步骤如下：
A.需要observe的数据对象进行递归遍历
B.compile解析模板指令
C.Watcher订阅者是Observer和Compile之间通信桥梁
D.MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者
11、angular双向绑定和vue双向绑定的区别
angular是通过脏检查实现，angular会将UI事件，请求事件，settimeout这类延迟的对象放入到事件监听的脏队列中，当数据变化的时候，触发$diget方法进行数据的更新，视图的渲染。
vue通过数据属性的数据劫持和发布订阅模式实现，大致可以理解为三个模块组成，observer完成对数据的劫持，compile完成对模板片段的渲染，watcher作为桥梁链接二者，订阅数据变化及更新视图。
12、vue框架与jQuery类库的区别
Vue直接操作视图层，它通过Vue对象将数据和View完全分离开来了。对数据进行操作不需要引用相应的DOM节点，只需要关注逻辑，完全实现了视图层和逻辑层的解耦；
Jquery的操作是基于DOM节点的操作，jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的js的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。它的优势在于良好的封装和兼容，使调用简单方便。
13、vue的生命周期
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
vue的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
第一次页面加载会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数；DOM 渲染在 mounted 中就已经完成了。官方实例的异步请求是在mounted生命周期中调用的，而实际上也可以在created生命周期中调用。
beforeCreate(创建前) ：数据观测和初始化事件还未开始
created(创建后)：完成数据观测，属性和方法的运算，初始化事件，el属性还没有显示出来。
beforeMount(挂载前) ：在挂载开始之前被调用，相关render函数首次被调用。实例完成以下配置：编译模板，把data里面的数据和模板生成html，但是没有挂载html到页面中。
mounted(挂载后)：挂载到实例之后被调用，实例完成以下配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前)：在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated(更新后)：在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前)： 在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后)： 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
activited：keep-alive专属，组件被激活时调用
deactivated：keep-alive专属，组件被激活时调用
14、Vue实现数据双向绑定的原理：Object.defineProperty（）
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。
15、vue-cli是什么？
Vue.js提供一个官方命令行工具，可用于快速搭建大型单页应用（在一个完成的应用或者站点中，只有一个完整的HTML页面，这个页面有一个容器，可以把需要加载的代码（以组件的方式）插入到该容器中）。
该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。
image
assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件等等
16、Vue组件如何通信
-
props/$emit+v-on: 通过props将数据自上而下传递，而通过$emit和v-on来向上传递信息。 - 中央事件总线
EventBus: 通过EventBus进行信息的发布与订阅，实现非父子组件之间的通信 - vuex: 是全局数据管理库，可以通过vuex管理全局的数据流
-
v-model方式：直接绑定父组件变量，把数据从子组件传回父组件
17、vuex是什么？
Vuex 类似 Redux 的状态管理器，用来管理Vue的所有组件状态。
18、vue组件中的data为什么是一个函数？
组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。
类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
19、computed和watch有什么区别?
- computed
1、computed是计算属性,也就是计算值
2、computed具有缓存性,computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算
3、computed适用于计算比较消耗性能的计算场景
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
- watch
1、Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
2、无缓存性，页面重新渲染时值不变化也会执行
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
}
网友评论