vue首次赋值不触发watch及watch和computed的区别

watch的使用

template中

 <div>名字：{{name}}，年龄：{{age}}</div>

script中

 export default {props: {  name: String  },data() {  return {  age: 10  } },watch: {name(newValue, oldValue) {},age(newValue, oldValue) {}},}

这种情况通过watch监听的数据，当字段被第一次赋值时是不会执行监听函数的。只有值再次发生改变才会执行监听。那如何才能在第一次赋值时就执行监听函数呢？这里就需要用到immediate和handler

immediate和handler使用

在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调
也就是说immediate值为true，则首次赋值时就执行handler函数，immediate值为false，则首次赋值时就不执行handler函数

 watch: {name: {handler(newValue, oldValue) {},immediate: true,},age: {handler(newValue, oldValue) {},immediate: true,},}

首次赋值监听时，oldValue值为undefined

deep 深度监听

当需要监听一个对象的改变时（注意这里监听的是整个对象），正常的watch无法监听到对象内部属性的改变，此时需要使用deep对对象进行深度监听

父组件

  people:{name:"露西"}btnClick() {this.people.name = "宙斯";}

子组件

  props: {people: {type: Object,//对象或数组的默认值必须从一个工厂函数返回。default: () => ({name: ""})}},watch: {people: {handler(newValue, oldValue) {},// immediate: true,  加上则首次也监听deep: true, //必须加上才能监听到people的变化},},

当对一个对象进行监听时，需要添加deep:true属性，此时修改对象内任意属性值都会被监听到。如果只想对对象中某一个属性进行监听，则可以使用字符串的形式监听对象某一个属性，如：

  watch: {'people.name': {handler(newValue, oldValue) {},deep: true,},}

deep和immediate可同时使用，表示首次绑定就触发监听函数

注意事项

1：数组的变动可直接进行监听，不需要deep属性，操作如下，若首次监听则需加immediate: true

增

  this.list.unshift({name: "宙斯"}) //添加到数组头部this.list.push({name: "宙斯"}) //添加到数组尾部

删

  this.list.shift() //删除数组头部一个元素this.list.pop() //删除数组尾部一个元素

改

  this.$set(this.list, 0, {name:"宙斯"}); //修改数组角标为0的数据

数组的splice方法，可用于插入、删除、替换操作，具体操作可移步到前端杂谈之splice用法

2：通过props传递对象或数组时，对象或数组的默认值必须从一个工厂函数返回,否则就会报

Invalid default value for prop “xxx”: Props with type Object/Array must use a factory function to return the default value.

  people: {type: Object,default: ()=>{}}list: {type: Array,default: ()=>[]}

props传递对象时，未传递的字段如何使用默认值

1：通过computed计算属性再定义一个对象，再用assign合并默认值和传递的对象，组件内则使用新定义的对象来展示数据，如

子组件

  <div> 姓名：{{privatePeople.name}} 年龄：{{privatePeople.age}} </div>props: {people: {type: Object,//数组／对象的默认值应当由一个工厂函数返回default: () => {}}},computed: {privatePeople() {let defaultPeople = {name: "露西",age: 10};return Object.assign({}, defaultPeople, this.people);}},

2：使用不带参数的v-bind=xxx

父组件

  <watch-components v-bind=people></watch-components>people: {name: "宙斯"}

子组件

  props: {name:{type:String,default:"露西"},age:{type:Number,default: 10}}

3：使用vuex对状态进行统一管理，子组件通过computed的计算属性获取存储在store中的变量

computed、watch、methods的区别和使用

computed计算属性-引用官网的示例

可监听data和props中的属性

主要用于当一些数据需要随着其它数据变动而变动时使用。如：购物车总金额

  computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}

特点

1：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。也就是说当computed函数所依赖的属性值没有发生改变时，调用的结果就会从缓存中读取。

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

  computed: {now: function () {return Date.now()}}

2：计算属性必须有return返回

watch侦听属性-引用官网的示例

可监听data和props中的属性
主要用于当需要在数据变化时执行异步或开销较大的操作时使用，如搜素框

  watch: {question(newValue, oldValue) {this.axios() //执行异步逻辑}}

特点

1：watch中的函数名称必须和data或props中的属性名称一致

2：watch中函数有两个参数，第一个是newValue新值，第二个是oldValue旧值。

methods:函数方法

主要用于写一段业务逻辑

区别

computed计算属性结果会被缓存，只有依赖的属性发生改变才会重新计算，主要用于当一些数据需要随着其它数据变动而变动时使用
watch侦听属性用来侦听对象或属性的变化，然后执行对应回调，回调函数内主要用于执行某些业务逻辑，如异步操作或开销较大的操作