聊聊vue3中watch和computed的使用方法

本篇文章带大家学习vue3，深入聊聊计算属性computed与侦听器watch的使用方法，希望对大家有所帮助！

一、watch

1.检测reactive内部数据

  
{{ obj.hobby.eat }}
  click  import { watch, reactive } from 'vue'  export default {      name: 'App',      setup() {          const obj = reactive({              name: 'ifer',              hobby: {                  eat: '西瓜',              },          })          watch(obj, (newValue, oldValue) => {              // 注意1：监听对象的时候，新旧值是相等的              // 注意2：强制开启深度监听，配置无效              console.log('触发监听');              console.log(newValue === oldValue) // true          })          return { obj }      },  }

登录后复制

注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程、一、watch

1.检测reactive内部数据

立即学习“前端免费学习笔记（深入）”；

    
{{ obj.hobby.eat }}
    click    import { watch, reactive } from 'vue'    export default {        name: 'App',        setup() {            const obj = reactive({                name: 'ifer',                hobby: {                    eat: '西瓜',                },            })            watch(obj.hobby, (newValue, oldValue) => {                // obj.hobby = { eat: '面条' }                console.log('对 reactive 自身的修改不会触发监听')            })            return { obj }        },    }

登录后复制

注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程】

  
{{ age }}
  click  import { watch, ref } from 'vue'  export default {      name: 'App',      setup() {          const age = ref(18)          // 监听 ref 数据 age，会触发后面的回调，不需要 .value          watch(age, (newValue, oldValue) => {              console.log(newValue, oldValue)          })          return { age }      },  }

登录后复制

一定得注意不能修改reactive本身，修改本身不触发

一、watch

1.检测reactive内部数据

    
age: {{ age }} num: {{ num }}
    click    import { watch, ref } from 'vue'    export default {        name: 'App',        setup() {            const age = ref(18)            const num = ref(0)            const handleClick = () => {                age.value++                num.value++            }            // 数组里面是 ref 数据            watch([age, num], (newValue, oldValue) => {                console.log(newValue, oldValue)            })            return { age, num, handleClick }        },    }

登录后复制

注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程。

                {                    immediate: true,                }

登录后复制

（学习视频分享：一、watch

1.检测reactive内部数据

    
{{ age }}
    click    import { watch, ref } from 'vue'    export default {        name: 'App',        setup() {            const age = ref(18)            const handleClick = () => {                age.value++            }            watch(                age,                (newValue, oldValue) => {                    console.log(newValue, oldValue) // 18 undefined                },                {                    immediate: true,                }            )            return { age, handleClick }        },    }

登录后复制

注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程、一、watch

1.检测reactive内部数据

立即学习“前端免费学习笔记（深入）”；

? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下

登录后复制

注意点：对 reactive 自身的修改则不会触发监听。【相关推荐：vuejs视频教程）

    
{{ obj.hobby.eat }}
    修改 obj.hobby.eat    import { watch, ref } from 'vue'    export default {        name: 'App',        setup() {            const obj = ref({                hobby: {                    eat: '西瓜',                },            })            // 注意：ref 监听对象，默认监听的是这个对象地址的变化            watch(obj, (newValue, oldValue) => {                console.log(newValue === oldValue)            })            return { obj }        },    }

登录后复制

watch(    obj,    (newValue, oldValue) => {        console.log(newValue, oldValue)        console.log(newValue === oldValue)    },    {        deep: true,    })

登录后复制

    
{{ obj.hobby.eat }}
    修改 obj    import { watch, ref } from 'vue'    export default {        name: 'App',        setup() {            const obj = ref({                hobby: {                    eat: '西瓜',                },            })            watch(obj.value, (newValue, oldValue) => {                console.log(newValue, oldValue)                console.log(newValue === oldValue)            })            return { obj }        },    }

登录后复制

    
{{ obj.hobby.eat }}
    修改 obj    import { watch, reactive } from 'vue'    export default {        name: 'App',        setup() {            const obj = reactive({                hobby: {                    eat: '西瓜',                },            })            // 把 obj.hobby 作为普通值去进行监听，只能监听到 obj.hobby 自身的变化            /* watch(      () => obj.hobby,      (newValue, oldValue) => {        console.log(newValue, oldValue)        console.log(newValue === oldValue)      }    ) */            // 如果开启了深度监听，则能监听到 obj.hobby 和内部数据的所有变化            /* watch(      () => obj.hobby,      (newValue, oldValue) => {        console.log(newValue, oldValue)        console.log(newValue === oldValue)      },      {        deep: true,      }    ) */            // 能监听影响到 obj.hobby.eat 变化的操作，例如 obj.hobby = { eat: '面条' } 或 obj.hobby.eat = '面条'，如果是 reactive 直接对 obj 的修改则不会被监听到（ref 可以）            watch(                () => obj.hobby.eat,                (newValue, oldValue) => {                    console.log(newValue, oldValue)                    console.log(newValue === oldValue)                }            )            return { obj }        },    }

登录后复制

  
firstName: {{ person.firstName }}
  
lastName: {{ person.lastName }}
    import { computed, reactive } from 'vue'  export default {      name: 'App',      setup() {          const person = reactive({              firstName: '初',              lastName: '映',          })          // 也可以传入对象，目前和上面等价          person.fullName = computed({              get() {                  return person.firstName + '*' + person.lastName              },              set(value) {                console.log(value,'value');//为上述get的返回值                  const newArr = value.split('*')                  person.firstName = newArr[0]                  person.lastName = newArr[1]              },          })          return {              person,          }      },  }

登录后复制

以上就是聊聊vue3中watch和computed的使用方法的详细内容，更多请关注【创想鸟】其它相关文章！