Vue3 新特性

1.子组件传值

子组件传值，Vue3.x直接以v-model:xxx形式传入参数，并且配合修饰符.sync进行数据同步更新，且组件支持多个v-model；

2.Reactive

Reactive，该方法接收一个参数 {} 创建一个响应式对象，如果该参数不是对象的话，也可以渲染到模板上，但不是响应式的数据；

3.Ref

Ref，该方法接收一个参数，可以是单个值，也可以是一个对象，并且都是响应式的数据。返回值里面带有.value属性取值，当使用模板渲染的时候可省去.value；

4.Computed

Computed，数据都是只读不能改变，传入一个对象set和get函数方法，这样才可以修改；

5.Readonly

Readonly，该方法接收传入一个对象，默认是只读功能，是深层对象只读，不管嵌套多少层的属性都是只读状态；

6.WatchEffect

WatchEffect，该方法接收一个函数并且立即执行，并当该函数里的变量变更时，重新执行该函数。该方法无法获取到原值，只能是改变之后的值；
如果要监听哪个值，需要在该函数里写出来，否则监听无效

import { ref, watchEffect } from "vue"
export default {
 name: 'test',
  setup() {
    let name = ref(“鸣人");
    let age = ref(23);
    watchEffect(() => {
        name.value; // 监听name
        age.value;  // 监听age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() => {
        name.value = “路飞"
    }, 5000)

    setTimeout(() => {
        age.value = 18
    }, 1000)
  }
}

有时候我们想在触发一定的条件后取消监听。这时可以执行watchEffect的返回值

import { ref, watchEffect } from "vue"
export default {
 name: 'test',
  setup() {
    let name = ref(“鸣人");
    let age = ref(23);
    let stop = watchEffect(() => {
        name.value; // 监听name
        age.value;  // 监听age
        
        console.log(name.value)
        console.log(age.value)
    })
    
    setTimeout(() => {
        name.value = “路飞"
    }, 5000)


    setTimeout(() => {
        age.value = 18;
        setTimeout(stop, 300)
    }, 1000)
  }
}

6.watch

watch等同于Vue2.x中的this.$watch，watch需要监听特定数据，默认情况是懒执行，也就是只有当数据发生变化时才执行第二个参数函数。
对比WatchEffect ，Watch允许我们
1.懒执行函数
2.更明确哪些状态改变触发监听器
3.可以监听获取到变化前后的值

监听单个值

import { ref, watch } from "vue"
export default {
 name: 'test',
  setup() {
    let name = ref(“鸣人");

    watch(name, (newVal, oldVal) => {
        console.log(newVal, oldVal) // 路飞， 鸣人
    })

    setTimeout(() => {
        name.value = “路飞"
    }, 1000)

  }
}

监听多个值，返回的是一个数组对象

import { ref, watch } from "vue"
export default {
 name: 'test',
  setup() {
    let name = ref(“鸣人");
    let age = ref(23);


    watch([name, age], (newVal, oldVal) => {
        console.log(newVal, oldVal) // ["路飞", 18], ["鸣人", 23]
    })
    
    setTimeout(() => {
        name.value = “路飞"
        age.value = 18
    }, 1000)
  }
}

7.生命周期系列

在Vue3.X也可以在setup函数下使用生命周期，这些钩子函数写法跟之前的生命周期写法不同。
注意：这些生命周期写法只能在setup函数下使用，在其它地方使用则会报错。

与Vue2.x版本生命周期相对应的组合式Api

• beforeCreate --> setup
• created --> setup
• beforeMount --> onBeforeMount
• mounted --> onMounted
• beforeUpdate --> onBeforeUpdate
• updated --> onUpdated
• beforeDestroy --> onBeforeUnmount
• destroyed --> onUnmount

<script>
import { onMounted, onUpdated, onUnmounted } from “vue"

export default {
 name: 'test',
  setup() {
    
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
    
  }
}
</script>

8.Provide && Inject

该方法和Vue2.x的 provide、inject一样的。但是Vue3新特性这俩方法只能在setup中使用。

• Provide：接收2个参数，第一个key值，第二个value值，进行传递
• Inject：接收2个参数，第一个是provide的key值，默认第二个参数可选，可以设置默认值(当找不到key值，设置一个默认值)

9.Refs

该方法相当于Vue2.x的refs一样获取元素，那么在setup中配合使用ref对象进行获取

<template>
  <div class="test">
    <p ref="el">123456</p>
  </div>
</template>


<script>
import { ref, onMounted } from "vue"
export default {
 name: 'test',
  setup() {
    let el = ref(null)
    onMounted(() => {
         console.log(el) // p标签元素
    })
    return {
        el
    }
   
  }
}
</script>