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高