一个项目学习Vue3---响应式基础

观察下面一段代码，学习响应式基础的全部内容

<template><div><div>将下面的msg属性放到上面来:{{ msg }}</div><button @click="count++">{{ count }}</button><button @click="object.count.value++">{{ object.count.value }}</button><button @click="open">点击变猪</button><button @click="addAge">长大一岁</button><a :href="hrefValue" id="herfValue">Dom更新的时间：{{ hrefValue }}</a><button @click="changeUrl">更改上面url</button><button @click="addAgeReactive">长大一岁{{ age.count }}</button></div>
</template><script lang="ts" setup>
import { nextTick } from 'vue'
import { ref } from 'vue'
import { reactive } from 'vue'
//绑定上方的学无止境
const msg = ref('学无止境')
//绑定上方的count
const count = ref(0)
//如果这么写count是不能被解包的
const object = { count: ref(1) }
//如果标签中存在object.count++则不会被解包
//必须使用object.count.value++才能//下面代买会输出学无止境
console.log(msg.value)
//绑定上方的变猪
function open() {msg.value = '猪'
}
//绑定一个对象
const user = ref({userName: '张三',age: 10
})
//增加一岁
function addAge() {user.value.age++
}
const hrefValue = ref('www.baidu.com')
async function changeUrl() {hrefValue.value = 'www.json.cn'let element = document.getElementById('herfValue')if (element) {console.log(element.getAttribute('href'))}await nextTick//他在执行了上面的nextTick方法之后才会改变值if (element) {console.log(element.getAttribute('href'))}
}
const age = reactive({ count: 0 })
//又增加一岁
function addAgeReactive() {//reactive创建的不需要写valueage.count++
}
let raw = {}
const proxy = reactive(raw)
//true
console.log(reactive(raw) === proxy)
//false
console.log(proxy === raw)
//即便返回
const proxy2 = reactive({})
proxy2.nested = raw
//返回false
console.log(proxy2.nested === raw)
proxy2.nested = proxy
//返回true
console.log(proxy2.nested === proxy)//reactive局限性
let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！) 重复赋值
state = reactive({ count2: 1 })
// 当解构时，count 已经与 state.count 断开连接
let { count2 } = state
// 不会影响原始的 state
count2++// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
//找不到count 这个属性，所以代理对象之间不能相互赋值
callSomeFunction(state.count2)function callSomeFunction(count) {//返回0console.log(count)
}//Ref自动解包
const name = ref('张三')
const bigName = reactive({ name })
//输出的实际是ref("张三")
console.log(bigName.name)
//ref("张三") = "李四"
bigName.name = '李四'
//返回李四
console.log(name.value)
//返回李四
console.log(bigName.name)//如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：
const otherName = ref("王五")
bigName.name = otherName
//返回王五
console.log(bigName.name)
//返回李四
console.log(name.value) //与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时，它不会被解包：
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)</script><style scoped>
</style>

他执行之后产生的页面是这样的

知识点1：ref()

当我们在script引入

<script lang="ts">import { ref } from 'vue'
</script>

我们就可以使用ref来代理一些变量，还记得我们在vue2中的写法吗？通过选项式API，我们在return中的变量都可以被vue双向绑定，而在vue3中我们可以使用更加便捷的方式来操作变量，

<script lang="ts">
import { ref } from 'vue'
setup(){const msg = ref('学无止境')return {msg}
}
</script>

在上面return中的内容就相当于vue2中任何return、methods等一切可以双向绑定的内容，是的，他也可以代理方法

<script lang="ts">
import { ref } from 'vue'
setup(){const msg = ref('学无止境')function open() {msg.value = '猪'}return {openmsg}
}
</script>

这样他就可以代理方法了，我们看到一个msg.value，什么意思呢？ref本质是一个对象，.value可以对对象进行解包，这样就可以获取msg的内容。当然如果你绑定到html代码里面，这个东西是会自动解包的

<div>将下面的msg属性放到上面来:{{ msg }}</div>

它也可以绑定对象等

<template><button @click="addAge">长大一岁</button>
</template>
<script lang="ts">
setup(){//绑定一个对象const user = ref({userName: '张三',age: 10})//增加一岁function addAge() {user.value.age++}return {user,addAge}
}
</script>

如果你想分别获取ref变化之前和之后的值，nextTick可以帮助到你

<template><a :href="hrefValue" id="herfValue">Dom更新的时间：{{ hrefValue }}</a><button @click="changeUrl">更改上面url</button>
</template>
<script lang="ts">
import { nextTick } from 'vue'
import { ref } from 'vue'
setup(){const hrefValue = ref('www.baidu.com')async function changeUrl() {hrefValue.value = 'www.json.cn'let element = document.getElementById('herfValue')if (element) {console.log(element.getAttribute('href'))}await nextTick//他在执行了上面的nextTick方法之后才会改变值if (element) {console.log(element.getAttribute('href'))}}return {changeUrl,hrefValue }
}
</script>

上面的代码在 await nextTick之前，他的值事还没有变化的，所以你hrefValue.value之后，是不能快速的获取到他的值的

写了这么多，我们发现每次都需要最后都要return，每次都需要写setup函数不方便，那么我们可以简化一些代码，例如上面那段代码，我们可以简化成

<template><a :href="hrefValue" id="herfValue">Dom更新的时间：{{ hrefValue }}</a><button @click="changeUrl">更改上面url</button>
</template>
<script lang="ts" setup>const hrefValue = ref('www.baidu.com')async function changeUrl() {hrefValue.value = 'www.json.cn'let element = document.getElementById('herfValue')if (element) {console.log(element.getAttribute('href'))}await nextTick//他在执行了上面的nextTick方法之后才会改变值if (element) {console.log(element.getAttribute('href'))}}}
</script>

这样就可以不写setup和return函数了，他会自己检测需要return的东西，函数或者变量都会被返回。

知识点2: reactive()

reactive的使用和ref基本类似

const age = reactive({ count: 0 })
//又增加一岁
function addAgeReactive() {//reactive创建的不需要写valueage.count++
}

如上面所示，他不需要进行写.value就可以对变量进行++操作

在比较相等性，也就是引用上，可能与我们想象的不同

let raw = {}
const proxy = reactive(raw)
//会引用同一个对象，返回true
console.log(reactive(raw) === proxy)
//封装的对象和原始对象不一样，返回false
console.log(proxy === raw)
const proxy2 = reactive({})
proxy2.nested = raw
//封装对象的属性被赋值普通对象，返回false
console.log(proxy2.nested === raw)
proxy2.nested = proxy
//封装对象的属性被赋值封装对象，返回true
console.log(proxy2.nested === proxy)

区别于vue2，return中的对象只会双向绑定，但是vue3中这么开放肯定会存在覆盖的现象

//reactive局限性
let state = reactive({ count: 0 })// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！) 重复赋值
state = reactive({ count2: 1 })
// 当解构时，count 已经与 state.count 断开连接
let { count2 } = state
// 不会影响原始的 state
count2++// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
//找不到count 这个属性，所以代理对象之间不能相互赋值
callSomeFunction(state.count2)function callSomeFunction(count) {//返回0console.log(count)
}

如上state又被重复赋值了，那么他最后指向的是后者当解构时，count 已经与 state.count 断开连接，即便++,也只是普通变量的++,不能改变count2的值

知识点3：ref自动解包

//Ref自动解包
const name = ref('张三')
const bigName = reactive({ name })
//输出的实际是ref("张三")
console.log(bigName.name)
//ref("张三") = "李四"
bigName.name = '李四'
//返回李四
console.log(name.value)
//返回李四
console.log(bigName.name)//如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：
const otherName = ref("王五")
bigName.name = otherName
//返回王五
console.log(bigName.name)
//返回李四
console.log(name.value) //与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时，它不会被解包：
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)const map = reactive(new Map([['count', ref(0)]]))
// 这里需要 .value
console.log(map.get('count').value)

就是有时候需要写.value,有时候不需要，在ref对象被当作一个对象传入时候是自动解包的，他在其他对象里面则无法自动解包

关注公众号：资小库，问题快速答疑解惑