选项式

{count:0}},methods:{addCount(){this.count}}

/scriptscript

在setup函数中写的数据和方法需要在末尾以对象的方式return才能给模版使用

scriptexport

reactive不能处理简单类型的数据ref参数类型支持更好但是必须通过.value做访问修改ref函数内部的实现依赖于reactive函数

组合式API

计算属性基本思想和Vue2保持一致组合式API下的计算属性只是修改了API写法

script

oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})})

/script2.

newName],[oldCount,oldName]){console.log(count或者name变化了[newCount,

/script3.

oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})},{immediate:

true})

通过watch监听的ref对象默认是浅层侦听的直接修改嵌套的对象属性不会触发回调执行需要开启deep

script

(){console.log(数据变化了)},{deep:true})const

changeStateByCount

调用ref函数生成一个ref对象通过ref标识绑定ref对象到标签

defineExpose

顶层组件可以向底层组件传递方法底层组件调用方法修改顶层组件的数据

Vue3.3