计算属性

vue3计算属性有简写和完整写法
简写：

const list = reactive({
  xing: '张',
  ming: '三'
});
//计算属性的简写形式  没有考虑被修改
list.quanming = computed(() => {
  return list.xing + '-' + list.ming;
});

完整写法：

//计算属性的完整写法
list.quanming = computed({
  get() {
    return list.xing + '-' + list.ming;
  },
  set(value) {
    let arr = value.split('-');
    list.xing = arr[0];
    list.ming = arr[1];
  }
});

watch 监听

watch可以接收3个参数,第一个是监听变量(监听多个的时候可以是数组),第二个参数是变化的时候执行的操作,第三个参数是初始化是否监听或者是否开启深度监听

watch监听一个变量

watch(
      num,
      (newvalue, oldvalue) => {
        console.log('num变化啦', newvalue, oldvalue);
      },
      { immediate: true }
    );

watch监听多个变量（当监听多个变量的时候 newvalue和 oldvalue就会变成数组 newvalue里面存放监听变量的最新值 oldvalue存放变量改变之前的值）

watch([num, msg], (newvalue, oldvalue) => {
      console.log('num或者msg变化啦', newvalue, oldvalue);
    });

watch监听reactive定义的变量无法正确获取oldvalue的值强制开启了深度监听

watch监听reactive定义的响应式数据中的某一个属性（watch的第一个参数需要写成一个函数返回）

watch(
      () => pasen.name,
      (newvulue, oldvualue) => {
        console.log('pasen.name变化啦', newvulue, oldvualue);
      }
    );

wactch监听reactive定义的响应式数据中的多个属性

watch([() => pasen.name, () => pasen.age], (newvua, oldvul) => {
      console.log('pasen.name或者pasen.age变化啦', newvua, oldvul);
    });

wactch监听reactive定义的响应式数据中的对象需要开启深度监听

wactch监听ref定义的响应式数据直接开启deep深度监听即可

watch(
      () => pasen.txt,
      (newvulue, oldvulue) => {
        console.log('pasen.txt变化', newvulue, oldvulue);
      },
      { deep: true }  //此时deep配置是有效的
    );

生命周期

vue2中的生命周期的写法在vue3中也是可以的使用的，在vue3中生命周期的beforeDestroy和destroyed这2个销毁的钩子该成了beforeUnmount和unmounted

vue3我们使用的事组合式api 我们的生命周期可以写在setup里面生命周期的前面需要加on，我们还要注意再setup里面是没有beforeCreate和created这2个钩子的，setup的执行是再beforeCreate和created前面

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue';
setup() {
    console.log('---setup---');
    onBeforeMount(() => {
      console.log('---onbeforeMount---');
    });
    onMounted(() => {
      console.log('---onMounted---');
    });
    onBeforeUpdate(() => {
      console.log('---onBeforeUpdate---');
    });
    onUpdated(() => {
      console.log('---onUpdated---');
    });
    onBeforeUnmount(() => {
      console.log('---onBeforeUnmount---');
    });
    onUnmounted(() => {
      console.log('---onUnmounted---');
    });

setup参数

setup可以接收2个参数第一个参数是父组件传过来的值，当前组件需要和vue2一样接收，不然会提示警告第2个参数可以进行插槽和子组件给父组件传值 注意：vue3子组件给父组件传值得时候，我们需要emits里面声明，不然会提示警告

props: ['msg', 'num'],
emits: ['hello'],
setup(props, context) {
    console.log(context.slots.qwe);
    //子组件给父组件传值
    function test() {
      context.emit('hello', 888);
    }
    return {
      test
    };

vue3的计算属性 ，watch，生命周期，setup参数