前端常见问题汇总(七)

一、vue的生命周期

详见vue的功能器官

二、vue中computed和watch以及methods的区别

  • 计算属性computed :

当页面中有某些数据依赖其他数据进行变动的时候,可以使用计算属性。需要注意的是,就算在data中没有直接声明出要计算的变量,也可以直接在computed中写入。

  1. 支持缓存,只有依赖数据发生改变,才会重新进行计算

在这里插入图片描述

  1. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
  2. computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
  3. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是多对一或者一对一的关系,一般用computed
  4. 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
// ...
   computed: {
       fullName: {
           // getter
           get: function () {
               return this.firstName + ' ' + this.lastName
           },
           // setter
           set: function (newValue) {
               var names = newValue.split(' ')
               this.firstName = names[0]
               this.lastName = names[names.length - 1]
           }
       }
   }
  1. 适用场景
    在这里插入图片描述
  • 侦听属性watch:(详见vue中watch监听数据的变化)
  1. 不支持缓存,只要数据变化,直接会触发相应的操作;
  2. watch支持异步;
  3. 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  4. 当一个属性发生变化时,需要执行对应的操作;一对多;
  5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,
      immediate:组件加载立即触发回调函数执行,
      deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

watch和computed很相似,watch用于观察和监听页面上的vue实例,当然在大部分情况下我们都会使用computed,但如果要在数据变化的同时进行异步操作或者是比较大的开销,那么watch为最佳选择。watch为一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。如果在data中没有相应的属性的话,是不能watch的,这点和computed不一样。

  • methods
    跟前面两个都不一样,我们通常在这里面写入方法,只要调用就会重新执行一次,相应的有一些触发条件,在某些时候methods和computed看不出来具体的差别,但是一旦在运算量比较复杂的页面中,就会体现出不一样。

需要注意的是,computed是具有缓存的,这就意味着只要计算属性的依赖没有进行相应的数据更新,那么computed会直接从缓存中获取值,多次访问都会返回之前的计算结果。

总结:
在computed和watch方面,一个是计算,一个是观察,在语义上是有区别的。
计算是通过变量计算来得出数据。而观察是观察一个特定的值,根据被观察者的变动进行相应的变化,在特定的场景下不能相互混用,所以还是需要注意api运用的合理性和语义性。

computed 和 watch 的区别先详细解释下再用一句话总结?

computed 名称不能与 data 里对象重复,只能用同步,必须有 return; 是多个值变化引起一个值变化,是多对一.

watch: 名称必须和 data 里对象一样,可以用于异步,没有 return;是一对多,监听一个值,一个值变化引起多个值变化。

三、vue组件通信

详见组件通信

Guess you like

Origin blog.csdn.net/qq_39490750/article/details/113877370