vue语法查缺补漏

1. v-cloak mustache语法 在未编译的时候会从{{data}} 编译成 '数据' 会有一段闪烁时间, 加上v-cloak 直到编译结束才会显示'数据',优化用户视觉体验.
2. v-bind 绑定语法 可以绑定对象数组 动态绑定属性的时候可以用key-value 的形式

<div v-bind="info">classs</div>
export default {
  data() {
    return {
      info:{
        name:'陈如斌',
        age:18,
        sex:'男性'
      },
    }
    }

3. v-for item in array 中的array 可以使用一个方法或者计算属性 v3.cn.vuejs.org/guide/list.…
4. 对于v-for和v-if优先级的解释 v-if的优先级是高于v-for的 v-if嵌套在v-for里 v3.cn.vuejs.org/style-guide…
5. for 循环中的虚拟节点 以及key的作用Vue3基础语法（⼆）
6. 计算属性对于setter和getter的理解,源码中setter和getter的理解 计算属性缓存的理解 v-model 修饰符
7. 重命名写法

let { firstName:first, lastName:last } = nameList[0];

<template>
  {{ fullName }}
  <button @click="fullName = '王八蛋'">改变值</button>
  <div>姓：{{ this.firstName }}</div>
  <div>名：{{ this.lastName }}</div>
  <!-- computed 是有缓存的  如果依赖项的值不会 改变 那么computed就是原先的值.而methods是调用几次赋值几次 是没有缓存的 -->
</template>
<script >
export default {
  data() {
    return {
      firstName: "陈",
      lastName: "如斌",
    };
  },

  computed: {
    // 这里是一个函数的形式
    aDouble() {
      // 它代表computed get 方法的语法糖
      return this.a * 2;
    },
    // 读取和设置 这里fullName是一个对象
    fullName: {
      get: function () {
        // 读取的时候
        console.log("读取");
        return this.firstName + "" + this.lastName;
      },
      set: function (fullName) {
        // 当fullName被赋值的时候可以做的一些操作
        this.firstName = fullName.split("")[0];
        this.lastName = fullName.split("")[1] + fullName.split("")[2];
      },
    },
  },
};
</script>
<style>
</style>

10. 使用this.$watch 实例化方法也可以监听 并且可以取消监听vm.$watch 返回一个取消观察函数，用来停止触发回调： cn.vuejs.org/v2/api/#vm-…