2.1.0 新增
场景:页面加载时需要让文本框获取焦点
用法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
mounted(){ //因为 mounted 阶段 dom 并未渲染完毕,所以需要$nextTick this.$nextTick(() => { this.$refs.inputs.focus() //通过 $refs 获取dom 并绑定 focus 方法 }) }
16.Vue.directive
16.1 使用
场景:官方给我们提供了很多指令,但是我们如果想将文字变成指定的颜色定义成指令使用,这个时候就需要用到Vue.directive
// 全局定义 Vue.directive("change-color",function(el,binding,vnode){ el.style["color"]= binding.value; }) // 使用 <template> <div v-change-color>{{message}} </div> </template> <script> export default{ data(){ return{ color:'green' } } } </script>
16.2 生命周期
1.bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。
2.inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)
3.update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新
4.componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用
5.unbind: 只调用一次，指令月元素解绑的时候调用
17. Vue.filter
场景:时间戳转化成年月日这是一个公共方法,所以可以抽离成过滤器使用
// 使用 // 在双花括号中 {{ message | capitalize }} // 在 `v-bind` 中 <div v-bind:id="rawId | formatId"></div> // 全局注册 Vue.filter('stampToYYMMDD', (value) =>{ // 处理逻辑 }) // 局部注册 filters: { stampToYYMMDD: (value)=> { // 处理逻辑 } } // 多个过滤器全局注册 // /src/common/filters.js let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') export { dateServer } // /src/main.js import * as custom from './common/filters/custom' Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))
18.Vue.compile
场景:在 render 函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>') new Vue({ data: { msg: 'hello' }, render: res.render, staticRenderFns: res.staticRenderFns })
19.Vue.version
场景:有些开发插件需要针对不同 vue 版本做兼容,所以就会用到 Vue.version
用法:Vue.version()可以获取 vue 版本
var version = Number(Vue.version.split('.')[0]) if (version === 2) { // Vue v2.x.x } else if (version === 1) { // Vue v1.x.x } else { // Unsupported versions of Vue }
20.Vue.set()
场景:当你利用索引直接设置一个数组项时或你修改数组的长度时,由于 Object.defineprototype()方法限制,数据不响应式更新
不过vue.3.x 将利用 proxy 这个问题将得到解决
解决方案:
// 利用 set this.$set(arr,index,item) // 利用数组 push(),splice()
21.Vue.config.keyCodes
场景:自定义按键修饰符别名
// 将键码为 113 定义为 f2 Vue.config.keyCodes.f2 = 113; <input type="text" @keyup.f2="add"/>
22.Vue.config.performance
场景:监听性能
Vue.config.performance = true
只适用于开发模式和支持 performance.mark API 的浏览器上
23.Vue.config.errorHandler
1.场景:指定组件的渲染和观察期间未捕获错误的处理函数
2.规则:
从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 undefined 时，被捕获的错误会通过 console.error 输出而避免应用崩溃
从 2.4.0 起，这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了
从 2.6.0 起，这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理
3.使用
Vue.config.errorHandler = function (err, vm, info) { // handle error // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子 // 只在 2.2.0+ 可用 }
24.Vue.config.warnHandler
2.4.0 新增
1.场景:为 Vue 的运行时警告赋予一个自定义处理函数,只会在开发者环境下生效
2.用法:
Vue.config.warnHandler = function (msg, vm, trace) { // `trace` 是组件的继承关系追踪 }
25.v-pre
场景:vue 是响应式系统,但是有些静态的标签不需要多次编译,这样可以节省性能