1 . Vue数据双向绑定原理
实现mvvm的数据双向绑定,是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。从而更新视图 主要步骤是以下几点:
1、通过数据监听器Observer,来监听model数据变化
2、通过指令解析器Compile来解析编译模板指令
3、最终利用watch搭起Observer和Compile之间的通信桥梁,实现数据变化=>视图更新;视图交互变化=>数据model变更的双向绑定效果
2. vue 常用指令有哪些,并说明作用
- v-model (多用于表单元素实现双向数据绑定)
- v-for (多用于循环创建DOM元素)
- v-show (为true显示元素,false隐藏元素)
- v-if (true显示元素,false 隐藏元素)
- v-hide (隐藏元素)
- v-else-if (必须和v-if连用)
- v-else (必须和v-if连用)
- v-on:click (给元素绑定点击事件,可简写成@click)
- v-text (解析文本)
- v-html (解析标签)
- v-bind (绑定一个动态属性,可以简写 :)
- v-once (进入页面只渲染一次,过后不再渲染)
3.vue生命周期钩子函数及应用场景
Vue生命周期可以分为4大阶段及8个钩子函数(总共有 11 个钩子函数):
1. beforeCreate(创建前):vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。无法访问到数据和真实的dom和data中的数据
2、created(创建后): created函数中可以对data对象里面的数据进行使用和更改,一般可以在这里做初始数据的获取, 这里进行dom操作需要使用vue.nextTick()方法
3、beforeMount(挂载前):vue实例的$el和data都初始化了, 注意此时还没有挂在html到页面上
4、mounted(挂载后):挂载完成 组件已经出现在页面中,数据、真实dom都已经处理好了
5、beforeUpdate (更新前):当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染,
6、updated(更新后):当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom
7、beforeDestroy(销毁前):在实例销毁之前调用,实例仍然完全可用 这一步还可以用this来获取实例,一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
8、destroyed(销毁后):在实例销毁之后调用,调用后,所有的事件监听器会被移出,所有的子实例也会被销毁,该钩子在服务器端渲染期间不被调用