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> {{children.name}} </div>

__EOF__

本文作者：小兔
本文链接：https://www.cnblogs.com/g-14/p/17215014.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！