二、vue3中的计算属性和侦听器以及过滤器

1.计算属性

vue3中可以继续使用vue2的语法,但是主要是可以用组合式api去写。

1.vue2写法

 export default {
   data() {
      return {
        phonename:'华为手机',
        price:5000
      }
    },
   methods: {
     updateName(){
      this.phonename = '苹果手机'
    }
  },
  computed:{
    // 计算属性在定义的时候是方法，里面返回结果
    // 在使用时，是当做属性在用
    // phoneInfo(){
    //   return this.phonename+'-'+this.price
    // },
    // 如果计算属性需要修改，要定义完整形式
    phoneInfo:{
      get(){
        return this.phonename+'-'+this.price
      },
      set(val){
        let arr = val.split('-')
        this.phonename = arr[0]
        this.price = parseInt(arr[1])
      }
    }
  } 
}

 2.组合式api写法

// 导入组合式API
import {computed, ref} from 'vue'
export default {
  // vue3目前推崇的是组合式API写法
  setup() {
    // 定义数据
    const phonename = ref('华为手机')
    const price = ref(5000)
    //定义方法
    const updateName = ()=>{
      phonename.value = '苹果手机'
    }
    //定义计算属性
    // 定义只读的计算属性
    // const phoneInfo = computed(()=>{
    //   return phonename.value+'-'+price.value
    // })
    // 定义可写的计算属性
    const phoneInfo = computed({
      get(){
        return phonename.value+'-'+price.value
      },
      set(val){
        let arr = val.split('-')
        phonename.value = arr[0]
        price.value = parseInt(arr[1])
      }
    })

    //返回模板中要用的数据
    return {
      phonename,
      price,
      updateName,
      phoneInfo
    }
  }
}

2.侦听器

// 引入组合式API watch 和 watchEffect
import {ref,reactive, watch, watchEffect} from 'vue'

export default {
// Vue3中的侦听器
    setup() {
        let money = ref(10000)
        let stu = reactive({
            name:'张三',
            age:20,
            car:{
                name:'奔驰',
                price:50
            }
        })

        // watch方法的参数分别是：
        // 第一个参数：监视的成员
        // 第二个参数：回调函数
        // 第三个参数：配置对象 （可以省略）
        // 简单用法：一上来没有立刻执行
        // watch(money,(nval,oval)=>{
        //     console.log(nval,oval);
        // })
        // 完整用法：加上第三个参数，配置对象
        watch(money,(nval,oval)=>{
            console.log(nval,oval);
        },{
            //立刻执行
            immediate:true,
        })

        // 监视reactive的数据，默认就开启深度监视，并且无法关闭
        // watch(stu,(nval,oval)=>{
        //     console.log(nval,oval);
        // })

        // 对于reactive的数据，可以采用监视部分属性
        // 监视对象身上的属性，推荐用下面的方式
        watch(()=>stu.name,(nval,oval)=>{
            console.log(nval,oval);
        })

        // 如果监视的是reactive里面的对象属性，默认是不开启深度监视的，需要手动开启
        watch(()=>stu.car,(nval,oval)=>{
            console.log(nval,oval);
        },{
            deep:true
        })

        //watchEffect监听器，只有一个回调函数参数，并且没有参数
        // 特点：
        // 1.默认会执行一次
        // 2.不需要明确监视谁，回调函数里面用到了谁，谁变了，就会重新执行回调函数。
        watchEffect(()=>{
            console.log('我是watchEffect');
            let m = money.value
            let name = stu.name
        })

        return{
            money,
            stu
        }
    }
};

3.过滤器

Vue3推荐我们使用方法或计算属性的方式，实现之前过滤器的效果,所以vue3移除了过滤器。