vue3_ref和reactive

2021-09-26 20:06:57 阅读：137 来源： 互联网

标签：obj 响应 age value reactive vue3 ref

vue3组件中可以没有根标签

<template>
  <h2>{{ test }}</h2>
  <button @click="testfun">点击更改</button>
  <h2>{{ count }}</h2>
  <hr />
  <h2>age: {{ obj.age }}</h2>
  <h2>other: {{ obj.other.age }}</h2>
  <h2>arr: {{ arr }}</h2>
</template>

setup函数会在组件最开始的时候执行一次, 并且只执行一次, 在beforecreate钩子之前执行
此时组件对象还未创建, this = undefined
该函数中返回的数据和函数在模板中可以直接使用, 但数据并不是响应式的数据

<script lang='ts'>
// 使用defineComponent定义组件对象
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  setup() {
    // 在return外部定义好数据和函数
    // 函数和数据经过return之后都能直接被模板使用
    // 但是直接定义的数据并不是响应式的, 只能初始化展示, 后续的操作并不会生效
    let test = '这不是响应的数据'
    // ---------------
    // 想要数据变成响应式, 需要使用ref和reactive
    // ref和reactive是vue3中实现的包装响应式数据的方法, 属于组合api部分,  composition API
    // ref用于定义基本类型的响应式数据, 返回的是ref对象, 其实也能传入对象, 当是对象时, 实际还是去调用了reactive
    // ref操作基本数据类型即给.value使用setter和getter进行数据劫持
    // 操作ref对象中的数据变化时, 需要操作ref对象.value; count.value++
    // 但是模板上不是使用ref对象.value, 模板上直接使用ref对象, 会自动携解析.value
    let count = ref(0)
    // reactive用于定义一个复杂类型的响应式数据, 比如对象, 数组
    // 并且是深层次的监视, 数组也不需要使用vue重写的方法才能实现响应式, 直接操作下标等任意操作都会响应
    // ---遗留问题: 不使用reactive也是响应式 ---下一篇文章解决了
    let obj = reactive({
      name: '111',
      age: 18,
      other: {
        age: 16,
      },
    })
    let arr: [number, number, number[]] = [1, 2, [1, 2]]
    // --------------操作的函数
    function testfun() {
      test = '更改了并未生效'
      console.log('更改数据')
      count.value++
      obj.age++
      obj.other.age++
      arr[2][0]++
    }
    return {
      test,
      testfun,
      count,
      obj,
      arr,
    }
  },
})
</script>

标签：obj,响应,age,value,reactive,vue3,ref
来源： https://blog.csdn.net/qq_50646256/article/details/120495844

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3_ref和reactive