Vue.js 前端开发 第一张到第四章总结

vue2.0生命周期图

重要生命周期解释

beforeCreate	组件属性计算前，el和data未初始化
create	data数据绑定，dom未生成，el不存在
beforeMount	完成el和data初始化（虚拟dom生成）
Mount	完成挂载

建议生命周期各个钩子函数可以做的事情

beforeCreate	加loading效果
created	结束loading，初始化数据，函数自执行
mounted	请求拿数据渲染
beforeDestory	确定删除xxx?
destory	卸载

 

注册组件

全局注册	Vue.component('组件名',{})
局部注册

 

注册过滤器  视图显示前格式化数据，不写入data，不影响数据

全局注册	Vue.filter('id',fn)
局部注册

 

vue2.0 仅在{{}}使用过滤器，取消对v-model，v-bind的支持。 过滤器后可以接受 ""  参数，也可以动态传参（data中的属性名）。 采取函数形式传参，而不是空格标记参数

自定义指令

全局注册	Vue.directive('id',{})  {}里为相关属性以及钩子函数
局部注册	组件的directives选项

 

三个钩子 bind （第一次绑定） update （绑定值变化）  unbind（解绑）

若只用update，可用函数替换全局注册时的定义对象{}

自定义指令绑定的值可以是data上的属性，也可以是字符串常量（update只执行一次，普通数据不响应数据变化）

指令实例属性  el ，vm， arg， name

高级选项

params 自动提取绑定元素上的其他属性，若绑定动态数据且设定一个watcher监听器，当数据变化时，执行监听器的回调函数

twoWay 将更改写回data中

vue2.0变化

新加componentUpdate钩子函数

取消指令实例概念（即钩子中的this不只想指令的相关属性，相关属性需要通过函数的参数形式传递）

bind钩子执行后，不执行update函数， 只要组件重绘，均调用update函数， 钩子函数的参数binding对象不可以更改，除非通过el直接修改DOM元素

 

v-model指令 自带lazy，number。trim修饰符

v-text 绑定再某个元素上，能避免未编译前的闪现问题

v-HTML 同上

v-el 为DOM元素注册一个索引 vm.$els.xxx/this.$el.xxx调用

v-ref 作用再子组件上 vm.$refs.xxx/this.$refs.xxx调用

v-once

v-on

事件修饰符  .stop   .prevent   .capture   .self

按键修饰符 enter tab delete esc space up down left right

Vue双向绑定的原理： 采用数据劫持结合发布者-订阅者模式，通过ObjectdefineProperty() 劫持个属性setter， getter，再数据变动时发消息给订阅者，触发响应的监听回调

Vue2.0与3.0的区别

默认懒观察，初始化可见部分的数据创建watcher

更精准更改通知， 新增属性/变化属性，仅依赖此属性的watcher会重新运行，对象的所有watcher不会重新运行（部分）

加入ts以及pwa支持