Vue3.0 学习一

组合式API：setup (替换了Vue2.0中的beforecreate和created)  setup中没有this, 直接实用就行。

// ref 定义响应式变量 

// reactive 定义引用数据类型

// toRefs 用来将解构出来的数据重新变成响应式数据

扩展运算符可以解构

import { ref, reactive, toRefs, watch, watchEffect, computed} from 'vue'

export  default {

　　setup(){

　　　　let a = ref(0)

　　　　console.log(a)   // {value : 0}

　　　　console.log(a.value)  // 0

　　　　//change  a的操作

　　　　function changeA(){

　　　　　　a.value++　　

　　　　}

　　　　let msg = ref('helloworld')

　　　　let obj = reactive({

　　　　　　name:'小兔',

　　　　　　age: 24,

　　　　　　children: {

　　　　　　　　name: '哈哈'

　　　　　　},

　　　　　　reverseMsg: computed(()=>{ return msg.value.split('').reverse().join('') })

　　　　})

　　　　//watch: 参数一：需要侦听的属性（可以多个，如： [a, b]; 监听对象中的某个属性值，如：()=>obj.name），参数二：回调函数，参数三：是否深度侦听、默认执行

　　　　watch(a, (newVal, oldVal)=>{ console.log(新值: newVal, 旧值: oldVal)}，{  deep:true//深度侦听, immediate:true//默认执行  }  )

　　　　/*

　　　　1、watchEffect不需要指定侦听的属性，自动收集依赖，只要在回调中引用到了响应式的属性，只要这些属性发生改变，回调就会执行

　　　　　　watch只能侦听指定的属性，做出回调函数的执行，可以侦听多个，Vue3开始后

　　　　2、 watch可以获取新值和旧值，watchEffect只有新值

　　　　3、 watchEffect在组件初始化的时候就会自动执行一次，watch要配置immediate:true

　　　　*/

　　　　watchEffect(()=>{ console.log(obj .name) })

　　　　let reverseMsg = computed(()=>{ return msg.value.split('').reverse().join('') })// computed 返回一个带有value属性的对象

　　　　console.log(reverseMsg .value)  // "dlrowolleh"

　　　　console.log(obj .reverseMsg)  // "dlrowolleh"

　　　　//生命周期钩子函数 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted  //可以多次使用

　　　　onBeforeMount(()=>{}) 

　　　　//return将需要用到的暴露出来，通过...结构出来的数据不再是响应式

　　　　return { a, changeA,  ...toRefs(obj), msg }

  　}

}

html中

<div>{{a}}</div>

<div> {{children.name}} </div>