vue中v-html会有什么问题?
v-if和v-show两者有区别?
- vue-show本质就是标签display设置为none,控制隐藏
- vue-if是动态的向DOM树内添加或者删除DOM元素
如何遍历对象?key的作用
可以使用v-for来进行遍历。
1)为了vue 核心库中的diff算法能更高效的更新DOM
2)使的内容和状态相关关联
不推荐v-for与v-if一同使用
事件修饰符
按键修饰符
vue组件的使用
- 父子组件间通信 父->子通过 props 、子-> 父 o n 、 on、 on、emit
- 获取父子组件实例的方式 p a r e n t 、 parent、 parent、children
- Ref 获取实例的方式调用组件的属性或者方法
- Event Bus 实现跨组件通信 Vue.prototype.$bus = new Vue
- Vuex 状态管理实现通信 $attrs $listeners
组件的生命周期
生命周期中的事件划分:
-
创建期间的生命周期函数
beforeCreate 实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性; created 实例已经在内存中创建完毕,此时 data 和 methods 已经创建完毕,此时还没有开始编译模板; beforeMount 此时已经完成了模板的编译,但是还没有挂载到页面中; mounted 此时已经将编译好的模板,挂载到了页面指定的容器中显示;
-
运行期间的生命周期函数
beforeUpdate 状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点; updated 实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了。
-
销毁期间的生命周期函数
beforeDestroy 实例被销毁之前调用,在该函数中,实例仍然完全可用。 destroyed Vue 实例销毁后调用,调用该函数后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁.
Vue父子组件生命周期调用顺序
- 加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件更新过程
父beforeUpdate->父updated
- 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
- 组件的调用顺序都是先父后子,渲染完成的顺序肯定是先子后父
- 组件的销毁操作是先父后子,销毁完成的顺序是先子后父
$nextTick
是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM
异步组件的作用
如果组件功能多打包出的结果会变大,我可以采用异步的方式来加载组件。主要依赖 import() 这个语法,可以实现文件的分割加载。
Vue-router 路由模式
hash 模式(默认模式),如http://abc.com/#/user/10
vue原理
1、建立虚拟DOM Tree,通过document.createDocumentFragment(),遍历指定根节点内部节点,根据{{ prop }}、v-model等规则进行compile;
2、通过Object.defineProperty()进行数据变化拦截;
3、截取到的数据变化,通过发布者-订阅者模式,触发Watcher,从而改变虚拟DOM中的具体数据;
4、通过改变虚拟DOM元素值,从而改变最后渲染dom树的值,完成双向绑定
完成数据的双向绑定在于Object.defineProperty()