vue 进阶属性

computed 计算属性

• 用于计算

import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    user: {
      email: "fangyuan.leslie@qq.com",
      nickname: "方方",
      phone: "1111111"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
        console.log(value);
        this.user.nickname = value;
      }
    }
  },
  template: `
    <div>
      {{displayName}}
      <div>
      {{displayName}}
      <button @click="add">set</button>
      </div>
    </div>
  `,
  methods: {
    add() {
      console.log("add");
      this.displayName = "圆圆";
    }
  }
}).$mount("#app");

watch 侦听

• 用于数据变化时，执行一个函数

代码示例1 ：codesandbox.io/s/goofy-cur…

• 简单属性看值变化，复杂属性看地址变化，用handler() deep=turn可以让复杂属性值变化也随之变化handler(){},deep=turn,意思就是复杂属性用deep监听的时候往深了看

• watch里面不要接 箭头函数，因为这里的箭头函数的this指向全局对象

• immediate: true 表示第一次是否运行这个函数