vue3学习记录笔记之响应式基础

1. 想学习好vue3把this给忘掉，vue3去除this指针概念
2. 首先我们看下在vue2和vue3更改状态变量值的变化

// 使用vue2更改变量的值
data() {
    return {
        obj: ''
    }
},
mounted() {
    this.obj = '小小菜鸡'
}

//vue3中
<script setup>
import { ref } from 'vue'
const obj = ref('11111')
obj.value = '2222'
console.log(obj)
</script>

如何声明基本数据类型普通响应式状态

import { ref } from 'vue'
const count = ref(0)

更改ref状态值

console.log(count)// 自行看下使用ref声明出来的count是什么
count.value++

如何声明引用数据类型响应式状态

import { ref } from 'vue'
const objectData = {
  name: '菜鸡',
  age: '28'
}
const objCount = ref(objectData)
console.log(objCount.value.name)
// 更改引用类型
objCount.value.name = '萨法'

记得ref可以持有任何类型的值，包括深层嵌套的对象，数组或者javaScript内置的数据结构，比如Map

vue3有出一个专门生命引用数据类型的响应式api reactive()将使对象本身具有响应性

import { reactive } from 'vue'
const state = reactive({ count: 0 })

在模版中使用

<button @click="state.count++">{{ state.count }}</button>

reactive()的局限性

1. 有限的值类型：只能用于对象类型，不能持有基础类型的值
2. 不能替换整个对象：由于vue的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用
3. 对解构的操作不好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数式，我们将丢失响应式连接

toRef也可以创建一个响应式数据

import { toRef } from 'vue'
const obj = {
  name: '马云',
  age: '50'
}
const res = toRef(obj, 'name')
const btn = () => {
    res.value = 'name'
}

上面的这个图其实已经修改了obj中的值，值已经发生了相关的变化，但是并不会更新视图层

***ref本质是拷贝粘贴一份数据，脱离了与原数据的交互
ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到源数据，但是会更新视图层
toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据，但是不会更新视图层