vue入门到精通（五）

最新推荐文章于 2024-05-16 08:55:13 发布

zxpmoxo

最新推荐文章于 2024-05-16 08:55:13 发布

阅读量438

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端前端框架开发语言

本文链接：https://blog.csdn.net/zxpmoxi/article/details/128672126

版权

3、响应式核心

3.1ref()

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。

如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。

将一个 ref 赋值给为一个 reactive 属性时，该 ref 会被自动解包

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

18_composition/80_composition_ref.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ref</title>
</head>
<body>
  <div id="app">
    count: {
  { count }}
    <button @click="add">加1</button>

    <br/>

    state.count: {
  { state.count }}
    <button @click="increment">加1</button>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const {
      createApp, ref, reactive } = Vue
  // ref number string boolean 数组
  // reactive object
  createApp({
     
    setup () {
     
      // 1.ref 对象的值是可以更改的，也就是说你可以为 '.value' 赋予新的值
      const count = ref(0)
      const add = () => {
     
        count.value++
      }

      // 2.如果将ref赋值给 一个 reactive 属性时，该ref会被自动解包 - 了解
      const obj = reactive({
     }) // reactive 属性
      obj.count = count // ref赋值给 一个 reactive 属性
      // 该ref会被自动解包
      console.log(obj.count) // 0
      console.log(obj.count === count.value) // true

      // 3.如果将一个对象赋值给ref，那么这个对象将通过 reactive() 转为具有深层次响应的对象 - 了解
      const state = ref({
      count: 10 })
      const increment = () => {
     
        state.value.count += 1
      }

      return {
     
        count,
        add,
        state,
        increment
      }
    }
  }).mount('#app')
</script>
</html>

以后创建非对象类型的数据使用 ref，创建对象类型的数据建议使用 reactive

3.2computed ()

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

创建一个只读的计算属性 ref：

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误

创建一个可写的计算属性 ref：

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0

18_composition/81_composition_computed.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性</title>
</head>
<body>
  <div id="app">
    count: {
  { count }} - {
  { doubleCount }} - {
  { plusOne }}
    <button @click="add">加1</button>

    <br/>
    <button @click="updateComputed">改变计算属性的值</button>
  </div>
</body>
<script src="../lib/vue.global.js"></script>
<script>
  const {
      createApp, ref, computed } = Vue
  createApp({
     
    setup () {
     
      const count = ref(0)
      const add = () => {
     
        count.value++
      }

      const doubleCount = computed(() => {
      return count.value * 2 })

      const plusOne = computed({
      // 可读可写 - 了解
        get () {
      return count.