Vue的学习成本和难度不高，这除了和框架本身的设计理念有关之外，还和Vue完善的官方文档有着密不可分的关系，相信有很多的开发者和我一样，很长时间没有仔细去看过官方文档了，最近花时间仔细看了一下官方文档，将里面一些容易忽视的点整理出来和大家分享。
容易忽视的点
箭头函数的使用
ES6的普及使得箭头函数的使用更加频繁，但是在Vue中不要在选项属性或者回调上使用箭头函数，举个例子：
new Vue({ el: '#app', data: { show: true }, created: () => { console.log(this.show) }, })
将created钩子写成箭头函数，这里的this将不再指向Vue对象，在浏览器中将会指向window对象，这是因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到为止
指令动态参数
Vue从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令参数，举个例子：
<div> <input v-on:[event] = "doSomething"> <button v-on:click="event = 'focus'">change</button> </div>
new Vue({ el: '#app', data() { return { event: 'input' } }, methods: { doSomething () { console.log('sss') } }, })
这里将input的事件监听设置为一个动态的参数event，默认是监听点击事件，当点击change的时候，改为监听focus事件，动态参数预期会求出一个字符串，异常情况下值为null，null值可以用于移除绑定，任何其他非字符串类型的值都会触发一个警告
template中使用方法
methods中提供的方法大多数时候都是用来给其他方法调用的，但是它其实也可以像computed计算属性一样直接写在模版里，举个例子：
<div>{{reversedMessage('hello')}}</div>
var app = new Vue({ el: '#app', methods: { reversedMessage: function (message) { return message.split('').reverse().join('') } }, })
有了computed计算属性，为什么还要用methods呢？计算属性是基于响应式依赖进行缓存的，只在相关依赖发生改变时才会重新求值，而methods每次调用都会重新计算，调用methods时可以传参，进行指定计算，但是computed不行，这在遍历数组时十分有用
用key管理可复用元素
Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做会使 Vue变得非常快，举个例子：
<div> <template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template> <button @click="change">change</button> </div>
var app = new Vue({ el: '#app', data() { return { loginType: 'username' } }, methods: { change () { this.loginType = this.loginType === 'username' ? 'email' : 'username' } } })
上面代码中切换loginType将不会清除用户已经输入的内容，因为两个模版使用了相同的元素，如果不想复用也很简单，只需要添加一个具有唯一值的key属性即可：
<template v-if="loginType === 'username'"> <label>Username</label> <input key="username" placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input key="email" placeholder="Enter your email address"> </template> <button @click="change">change</button>
现在切换，每次都会重新渲染，但是label元素还是会被复用，因为它没有加唯一key值
v-if与v-for一起使用
Vue的风格指南不推荐同时使用v-if与v-for，当项目中的eslint继承了@vue/standard时，同时使用就会编译报错，但是可以通过在模版上加<!-- eslint-disable -->进行忽略，同时当它们处于同一节点，v-for的优先级比v-if更高，这意味着v-if 将分别重复运行于每个v-for循环中
对象变更检测
在Vue中对于已经创建的实例，不允许动态添加根级别的响应式属性，但是我们知道可以通过Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性，那如果需要为已有对象赋值多个新属性呢？举个例子：
<div>{{user.name}}-{{user.age}}-{{user.sex}}</div>
var app = new Vue({ el: '#app', data() { return { user: { name: 'xxx' } } }, created() { this.user = Object.assign({}, this.user, { age: 18, sex: 'name' }) }, })
可以用Object.assign为这个对象重新赋值，这样就能添加多个新的响应式属性
内联方法访问原始DOM事件
有时在模版中调用方法时，我们需要向方法中传参数，但是同时又要传递原始的DOM事件，怎么处理呢？举个例子：
<div> <button @click="share('share info', $event)">share</button> </div>
var app = new Vue({ el: '#app', data() { return { user: { name: 'xxx' } } }, methods: { share (info, event) { console.log(info, event) } }, })
如例子所示，可以用特殊变量$event把它传入方法
once、passive事件修饰符