vue取div当前宽度_浅析Vue进阶属性“computed、watch”

计算属性 - computed

计算属性就是被计算出来的属性就叫计算属性，列如用来展示用户名，或者用户列表展示等等。

举个栗子吧栗子

正常注册表用户名、邮箱、电话，用于优先展示用户名。

new Vue({
  data: {
    user: {
      email: "renshisan@qq.com",
      nickname: "荏狸十三",
      phone: "13800002245"
    }
  },
  template:`
		<div>
			{{user.nickname || user.email || user.phone}}
		</div>
`
}).$mount('#app');

但是可能会出现用户没有填写昵称，遇到没有填写昵称的情况下就优先展示邮箱。

如果需要在多个网页展示用户名的话就得多写{{user.nickname || user.email || user.phone}} 。

代码升级！

这里我们就有用到技术算属性computed

 new Vue({
  data: {
    user: {
      email: "renshisan@qq.com",
      nickname: "荏狸十三",
      phone: "13800002245"
    }
  },
  computed: {
    displayName: {
        const user = this.user;
        return user.nickname || user.email || user.phone;
    }
	}，
    template:`
		<div>
			{{displayName}}
		</div>
`
}).$mount('#app');

我们通过computed创建一个函数，将user返回给这个函数，user是从this里面取的，所以在开始的时候需要声明user=this.user。

以后我们需要展示用户名，我们只需要调用displayName即可。

来给代码加点料！

如果需要更改用户名的话同样可以通过get和set来实现。

new Vue({
  data: {
    user: {
      email: "renshisan@qq.com",
      nickname: "荏狸十三",
      phone: "13800002245"
    }
  },
  computed: {
    displayName: {
      get() {
        const user = this.user;
        return user.nickname || user.email || user.phone;
      },
      set(value) {
         this.user.nickname = value;
      }
    }
  },
    template:`
		<div>
			{{displayName}}
		</div>
`
}).$mount('#app');

首先我们先将displayName改成对象，对象里面有一个get函数，get当然是获取到它的这个user。

然后set，会传一个value进来 ，设置用户名的话就是this.nick 等于传进来的这个value。

关于缓存，如果依赖的属性没有变化，就不会重新计算，getter/setter默认不会做缓存，Vue做了特殊处理。

侦听 - watch

vue中使用了watch侦听属性用来监听和响应 Vue实例上的数据变动。

watch就是在数据发生变化的时候，进行执行一个函数。

老规矩上栗子

new Vue({
  data: {
    n: 0,
    obj: {
      a: "a"
    }
  },
  template: `
    <div>
      <button @click="n += 1">n+1</button>
      <button @click="obj.a += 'hi'">obj.a + 'hi'</button>
      <button @click="obj = {a:'a'}">obj = 新对象</button>
    </div>
  `,
  watch: {
    n() {
      console.log("n 变了");
    },
    obj() {
      console.log("obj 变了");
    },
    "obj.a": function() {
      console.log("obj.a 变了");
    }
  }
}).$mount("#app");

上面代码当中就一个普通的变量和对象，然后有三个按钮分别有三个对应的操作。

• 当点击​n+1​的时候，​n+1​是一个简单类型n会发生改变。（简单类型的值一定会发生改变，因为简单类型存的是值，复杂类型存的才是地址）
• ​当点击​obj.a+"hi"的时候里面的值依然会发生改变，因为这是一个对象简单类型。
• 当点击​obj=新对象 的时候这个对象的地址会发生改变vue才会认为这个对象发生了改变。

computed 和 watch 的区别

computed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。

计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。

watcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调，在方法中会传入 newVal 和 oldVal。可以提供输入值无效，提供中间值 特场景。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。如果你需要在某个数据变化时做一些事情，使用watch。