Vue3之ref与reactive的基本使用

​ Vue3之ref与reactive的基本使用
ref可以创建基本类型、对象类型的响应式数据
reactive只可以创建对象类型的响应式数据
接下来让我为大家介绍一下吧！
在Vue3中，我们想让数据变成响应式数据，我们需要借助到ref与reactive
先为大家介绍一下ref如何使用还有什么注意点
我们需要导入ref，利用对象结构的办法
sum的值为：
{{ sum }}
<button@click=“add”>sum+1
姓名：{{ obj.name }}
<button@click=“changeName”>修改姓名为李四<scriptsetuplang="ts"name=“Person”>import{ ref }from’vue’;
// 我们需要用ref()的形式去定义需要响应式的数据letsum =ref(1)functionadd() {
// 注意点，我们需要用到 sum.value才可以获取到值sum.value+=1}
// 我们也可以用在对象上constobj =ref({name:“张三”})functionchangeName() {
// 对象我们需要使用到obj.value才可以修改数据obj.value.name=“李四”}
reactive的基本使用与注意事项
姓名：{{ obj.name }}
<button@click=“changeName”>修改姓名为李四<scriptsetuplang="ts"name=“Person”>import{ reactive }from’vue’;
// 我们也可以用在对象上constobj =reactive({name:“张三”})
// reactive就不像ref一样，不需要使用到.valuefunctionchangeName() {
// 修改姓名 直接obj.name// obj.name = “李四”
// 我们也可以使用到Object.assign 这是我们想把对象整体改掉时写的Object.assign(obj, {name:“李四”})}
/139981067