27.Vue中容易忽略的点

1.箭头函数的使用

 在vue中不要在选项属性或者回调上使用箭头函数：

new Vue({
  el: '#app',
  data: {
    show: true
  },
  created: () => {
    console.log(this.show)
  },
})

上边代码将created钩子写成箭头函数，这里this就不再指向vue对象，在浏览器中将会指向window对象；因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到为止。

2.指令动态参数

可以用方括号括起来的JavaScript表达式作为一个指令参数：

<input v-on:[event] = 'doSomething'>
<button v-on:click = "event = 'focus'">change</button>

var app = new Vue({
    el: '#app',
    data(){
        return{
            event:'input'
        }
    },
    methods:{
        doSomething(){
            console.log('sss')
        }
    }
})

这里将input的事件监听设置为一个动态的参数event，默认是监听点击事件，当点击change按钮的时候，改为监听focus事件

3.用key管理可复用元素

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值

4.对象变更检测

对于vue中对于已经创建的实例，不允许动态添加跟级别的响应式属性，但可以通过Vue.set?(object,propertyName,vlaue)方法向嵌套对象添加响应式属性，如果需要为已有对象赋值多个新属性，则需要：

<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为这个对象重新赋值，这样就能添加多个新的响应式属性

来源：CSDN

作者：夏小拙

链接：https://blog.csdn.net/Annexiaobin/article/details/103460538