vue相关知识点

vue面试总结

1、vue的生命周期

breforCreate()——创建前

在vue被创建前el和data都没有被初始化，没有methods,data,computed等方法

created()——创建后

在vue被创建后，这里可以调用methods方法来改变data的值，获取computed，写一些异步的网络请求，因为这个时候data已经通过了Object.defineProperty的方法劫持和添加观察者模式，数据已经能够支持双线数据绑定了，created会在munted前执行，所以同样的请求时间的话，把请求放在created中更好

breforMounte()——挂载前

页面在挂载前的话就是把data里的数据和模板生成一个html，完成了el和data的初始化（这时候还没有挂载html页面）

mounted()——挂载后

这时候页面已经渲染了可以对DOM进行一些操作，例如this.$refs.xx来获取DOM元素

breforupdata()——更新前

这里需要注意的是这个钩子函数只是针对于视图层的，比如我视图层没有任何的标签，但是我在mounted中进行更改data数据，这时候呢beforeupdata就不会触发，因为视图层并没有发生变化，但是如果我们在视图层加上一个p标签，这时候在mounted中对p的内容进行修改的话就会触发，还有在这个钩子函数中更改data的时候不会进入循环，因为mounted更新的数据还没有更新到视图层，所以这个也就不会再次触发这个钩子函数

updated()——更新后

更新后呢这里就要注意了不能再去改变data数据了，因为这里已经对视图层进行了更改这时候再去更改data的话会进入死循环

breforDestory()——销毁前

这里需要注意的是哪些操作会触发这个钩子函数，首先是v-if，因为v-if的实现原理就是对dom的删除的添加，接着是组件的切换，同一个页面切换不同的组件也会触发，然后是通过this.$destroy进行内部销毁（内部销毁不会移出DOM）,常用的方法是销毁一些计时器，这里还是可以获取到DOM的

destoryed()——销毁后

这里的话就会移出事件监听和子实例都会被销毁

vue双向数据绑定的原理

vue双向数据绑定是通过数据劫持结合发布者-订阅者的方式来实现的，

如何实现？

在data中定义一个对象，我们打印这个对象的话会有一个get和set的两个方法，因为vue是通过object.definpropery进行数据劫持的，这里的object.definproperty中就有set和get两个属性，

get的话是在读取这个数据的时候会调用，set是在设置的时候调用，这个就是数据劫持的基本原理

实现mvvm主要呢还是包含了两个方面，数据变化更新视图，视图变化更新数据

试图变化更新数据的话很容易实现，比如input标签监听input时间就可以了，主要还是实现数据变化更新视图

数据变化更新视图就是利用一个监听器observe对数据的属性进行监听，在监听数据的过程中，会为 data 中的每一个属性生成一个主题对象 dep

在complie的时候会为每个与数据绑定相关的节点生成一个订阅者 watcher，watcher 会将自己添加到相应属性的 dep 中

https://www.cnblogs.com/libin-1/p/6893712.html

vue中v-if和v-for一起使用会出现什么情况

在vscode中一起使用会出现编辑器报错，因为v-for的优先级要比v-if高