22年前端面试常问题目

---

目录

22年前端面试常问题目

# 一、computed计算属性

# 二、watch监视属性

# 三：watch和computed的区别

---

# 一、computed计算属性

       ##  1.使用场景：页面中需要用到一个数据，在data中没有这个属性，就可以用data中已有的属性计算得来

       ##  2.计算属性完整版和简写版   上代码

2.1 完整版写法，可读写，get必须有return （示例：全选反选）

computed: {

    isAll: {

      //小选框影响全选框

      get () {

        return this.obj.every((item) => item.goods_state);

      },

      // 全选框影响小选框

      set (val) {

        this.obj.forEach((item) => (item.goods_state = val));

      },

    },

  },

       

2.2 简写版，省略set，计算属性直接写成函数形式，只能读不能写，简写方式必须有return

3. 在template中重复使用计算属性，打印的结果只打印出一次---因为计算属性有缓存，多次使用相同内容会从缓存中取值，性能更优于methods

代码如下：

##  3.计算属性要点：

        3.1 .get必须有return；简写版必须有return

        3.2 计算属性不能在data里面重复定义，是由data中的属性计算后的返回值

        3.3 使用时计算属性不需要调用，它只是计算之后的返回值

        3.4 计算属性不能开启异步任务

        3.5 如果计算属性要被修改，必须写set函数去修改，并且set要引起计算属性依赖的属性发生改变 计算属性才会改变

  ##  4. 计算属性里get和set什么时候被调用？

        get：当有人初次读取get里的属性时会被调用

        set：当计算属性被修改时就会调用set ，set能接受到修改后的值

# 二、watch监视属性

       ## 1.使用场景： data 或computed里面的值改变之后，还需要做一些操作实时监听他们的改变，就可以用侦听器（监视属性）

      ##  2. 监视属性完整写法一  案例：监听数据改变---做持久化--页面刷新数据还在

// 目标: 侦听list改变 - 同步到本地localStorage里

        ## 3.监视属性完整写法二： 通过vm.$watch监视

        Vue对象.$watch("监听属性",{配置对象})

        newVal：数据发生改变后的值

        oldVal：数据发生改变前的值

// vm为Vue对象
vm.$watch("isHot",{
    immediate:true
    handler(newVal, oldVal){
    console.log(newVal,oldVal)
	}
})

       ##  4.监视属性进行异步操作

// watch通过监视data中的firstName和lastName的变化改变fullName

       ## 5.监视属性简写

        简写版：省略handler，监视属性直接当函数写

watch:{
    isHot(){
        ....
    }
}

        ## 6.监视属性要点：

                2.1 vue里的watch默认不检测对象内部值的改变，配置deep：true可以实现多层监视

                2.2 配置immediate:true, 初始化时，就让handler调用，实现立即监听

---

# 三：watch和computed的区别

         1.computed能完成的功能，watch都可以完成

          2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作