vue3中的computed和watch

Posted 2023-04-27

参考技术A computed 计算属性功能和vue2一样，可以缓存得到的结果，只有当依赖的数据发生变化后才会重新触发的逻辑，计算属性的值可以是一个函数也可以是一个对象

<script setup>

import  computed, ref  from 'vue'

const msg = ref('world')

const formate = computed(() => 

  return 'hello ' + msg.value

)

formate.value = 'hello roles' //计算属性是一个只读属性 不能进行更改

const changeMsg = () => 

  msg.value = 'vue3'



// 计算属性的值可以是一个函数也可以是一个对象

let str = ref('')

const formate = computed(

  set(val) 

    str.value = val

  ,

  get() 

    return str

  

)

// 当我们给一个计算属性赋值的时候会出发该属性的set方法 set方法得到的参数就是赋的值

const changeMsg = () => 

  formate.value = 'hello vue3'



</script>

watch：计算结果不会缓存，监听数据的变化会触发执行函数

<script setup>

import  watch, ref, reactive  from 'vue'

// const num = ref(0)

// 第一个参数是要监听变化的数据 第二个是数据变化后出发的回调函数 第三个是配置项

watch(num, (newVal, oldVal) => 

  console.log(newVal, oldVal)

 )

const state = reactive(

  num: 1,

  obj: 

    name: 'zhangsan',

    age: 16

  

)

// 这种情况下我们第一个参数需要使用一个函数返回需要监听的数据

watch(() => state.obj, (newVal, oldVal) => 

  console.log(newVal, oldVal)

, 

  deep: true, // 开启深度监听

  immediate: true // 值如果是true会打开首次监听

)

</script>

vue 中的watch 和 computed

watch ：

Watch属性可以监视 data 中指定数据的变化，一旦被监听的数据值发生了改变，就会立即触发watch对应的 function处理函数：

<template>
     <div> 
        <input type="text" v-model="firstname" /> +
         <input type="text" v-model="lastname" /> = 
        <input type="text" v-model="fullname" />
     </div> 
</template>

export default { 
    data(){ 
        return{ 
            firstname:"",
             lastname:"",
             fullname:"" 
      } 
},
 watch:{ 
        //newVal:最新数据；
        //oldVal:上一次数据 
        "firstname":function(newVal,oldVal){
                 this.fullname = newVal+"-"+this.lastname;
         }, 
        "lastname":function(newVal){ 
                this.fullname = this.firstname+"-"+newVal; 
        } 
    } 
};

使用watch属性监听路由地址:

入口js文件的vue实例上添加watch属性 监听$route.path，只要地址栏中的url发生了改变，就会被监听到

var vm = new Vue({ 
        el: "#app", 
        render: c => c(App4), 
        router:routerObj,
         watch: {
                 "$route.path": function(newVal, oldVal) { 
                        console.log(newVal + ' --- ' + oldVal);
                 } 
        } 
})

在 computed 中定义的属性，叫做计算属性，计算属性的本质是 一个方法，但是我们在使用 这些计算属性的 时候，是把它们的名称，直接当作属性来使用的；并不会把计算属性当作方法去调用.

计算属性computed定义的属性不需要在data中声明

计算属性指向的function内部，所用到的data中的任何数据发生了变化，就会立即触发function，重新计算 这个属性的值

export default { 
    data() { 
        return { 
            firstname: "",
             lastname: "“
         }; 
    }, 
    computed: { 
        fullname: function() { 
                return this.firstname + "-" + this.lastname; 
        }
     } 
};

1：计算属性的求值结 果，会被缓存起来， 方便下次直接使用,提 高运算效率
2： fullname在data中 不能定义
3： 只要firstname或者 lastnama发生了改变， funciton会立即触发执行。