简述Vue中容易被忽视的知识点

<div id="app">
  <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 id="app">{{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事件，怎么处理呢？举个例子：