computed:
1. computed 具有缓存功能,可以监听对象某个具体属性。
2.变量不在 data中定义,而是定义在computed中。
3.根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值。
而methods中每调用一次就会重新计算一次,为了进行不必要的资源消耗,选择用计算属性.
4. 初始化的时候就可以被监听到并且计算
<template> <div> <h2>{{isMan}}</h2> </div> </template> <script> export default { data () { return { form: { baseInfo: { area: '面积', streetTown: '地区' } } } },
//根据一个现有数据去生成一个新数据,并且这两个数据会永久的建立关系,还会建立缓存,当无关数据改变的时候,不会重新计算而是直接使用缓存中的值。
而methods中每调用一次就会重新计算一次,为了进行不必要的资源消耗,选择用计算属性
computed: { isMan () { return this.form.baseInfo.area && this.form .baseInfo.streetTown } } } </script> <style> </style>
watch:
1.watch 监听的是已经在 data 中定义的变量, 当该变量变化时,会触发 watch 中的方法
2.watcher,当需要在数据变化时执行异步或开销较大的操作时,这时watch是非常有用的
3.watch可以进行深度监听,监听对象的变化。
4.只能监听简单数据类型,如果监听复杂数据类型,如对象,无法监听对象具体某个属性。
//Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如 data() { return { queryData: { name: '', creator: '', selectedStatus: '', time: [], }, } } // 现在我需要监听这个queryData,我可以这样做: watch: { queryData: { handler: function() { //do something }, deep: true } }
// 里面的deep设为了true,这样的话,如果修改了这个queryData中的任何一个属性,都会执行handler这个方法。不过其实这样开销是蛮大的,尤其是对象里面结构嵌套过深的时候。 而且有时候我们就想关心这个对象中的某个属性,比如name,这个时候可以这样 watch: { 'queryData.name': { handler: function() { //do something }, deep: true } }
// 或者还可以这样巧用计算属性 computed: { getName: function() { return this.queryData.name } } watch: { getName: { handler: function() { //do something }, } }