Vue3 中 setup,ref 和 reactive 的理解

这篇具有很好参考价值的文章主要介绍了Vue3 中 setup,ref 和 reactive 的理解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

setup

Vue3中使用了Composition API这种写法,使得所有的组合API函数都在此使用, 只在初始化时执行一次。
函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用

setup的一些细节问题

1,setup执行的时机 和 返回值:

  • 在beforeCreate之前执行(一次), 此时组件对象还没有创建,不能通过this来访问data/computed/methods / props
  • 返回值一般为一个对象,返回对象中的属性/方法,会与data/methods函数返回对象的属性合并成为组件对象的属性/方法
  • methods中可以访问setup提供的属性和方法, 但在setup方法中不能访问data和methods;
  • setup不能是一个async函数: 因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性数据
  • 如果有重名, setup优先

2,setup的参数:

  • setup(props, context) / setup(props, {attrs, slots, emit})
  • props: 包含props配置声明且传入了的所有属性的对象
  • attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs
  • slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots
  • emit: 用来分发自定义事件的函数, 相当于 this.$emit
props: ['msg'],
emits: ['fn'], // 可选的, 声明了更利于程序员阅读, 且可以对分发的事件数据进行校验
setup (props, {attrs, emit, slots}) {
	console.log(props.msg, attrs.msg2, slots, emit)
	function toClick(){
		emit(fn, 'xxxxx') // 相当于 this.$emit
	}
}

ref

作用:定义一个数据的响应式
语法:const xxx = ref(initValue)
一般用来定义一个基本类型的响应式数据

  • 创建一个包含响应式数据的引用(reference)对象
  • js中操作数据: xxx.value
  • 模板中操作数据: 不需要.value

结合setup 和 ref 使用说明

其中vue2的写法为:

<template>
  <h2>{{count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
export default {
  /* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */
   data () {
     return {
       count: 0
     }
   },
   methods: {
     update () {
       this.count++
     }
   }
}
</script>

vue3的写法为:

  1. setup最终会返回一个对象,并且对象中的值可以在模板中使用,如count
  2. 保证响应式,必须使用ref
<template>
  <h2>{{count}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import {
  ref
} from 'vue'
export default {
  /* 使用vue3的composition API */
  setup () {
    // 定义响应式数据 ref对象
    const count = ref(1)
    console.log(count)

    // 更新响应式数据的函数
    function update () {
      count.value = count.value + 1
    }

    return {
      count,
      update
    }
  }
}
</script>

reactive

作用:定义多个数据的响应式,例如一个对象;
const isProxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是“深层的”:会影响对象内部所有嵌套的属性
内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据都是响应式的

<template>
  <h2>name: {{state.name}}</h2>
  <h2>age: {{state.age}}</h2>
  <h2>wife: {{state.wife}}</h2>
  <hr>
  <button @click="update">更新</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup () {
    /*  定义响应式数据对象 */
    let obj = {
      name: 'tom',
      age: 25,
      wife: {
        name: 'marry',
        age: 22
      },
    };
    // 此时state通过 reactive代理了obj,使其内属性成为响应式的;
    const state = reactive(obj)
    // 此时打印state 会得到一个Proxy的一个对象
    // state---代理对象,obj---目标对象
    console.log(state)

    const update = () => {
      state.name += '--'
      state.age += 1
      state.wife.name += '++'
      state.wife.age += 2
    }

    return {
      state,
      update,
    }
  }
}
</script>

总结:如果操作代理对象,目标对象中的值也会跟着改变,如果想要页面跟着渲染,也是操作代理对象;

ref 和 reactive的一些细节

  • 是Vue3的 composition API中2个最重要的响应式API;
  • ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式);
  • 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象;
  • ref内部: 通过给value属性添加getter/setter来实现对数据的劫持;
  • reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据;
  • ref的数据操作: 在js中要.value, 在模板中不需要(内部解析模板时会自动添加.value)
export default {

  setup () {
    const m1 = ref('abc')
    const m2 = reactive({x: 1, y: {z: 'abc'}})

    // 使用ref处理对象  ==> 对象会被自动reactive为proxy对象
    const m3 = ref({a1: 2, a2: {a3: 'abc'}})
    console.log(m1, m2, m3)
    console.log(m3.value.a2) // 也是一个proxy对象

    function update() {
      m1.value += '--'
      m2.x += 1
      m2.y.z += '++'

      m3.value = {a1: 3, a2: {a3: 'abc---'}}
      m3.value.a2.a3 += '==' // reactive对对象进行了深度数据劫持
      console.log(m3.value.a2)
    }

    return {
      m1,
      m2,
      m3,
      update
    }
  }
}

vue3响应式虽然写起来麻烦,但是减少了vue2响应式带来的性能开销文章来源地址https://www.toymoban.com/news/detail-634814.html

到了这里,关于Vue3 中 setup,ref 和 reactive 的理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3 #ref #reactive

    一、ref 函数将简单类型的数据包装为响应式数据 import { ref } from \\\'vue\\\'  const count = ref(10) 一、reactive函数将复杂类型的数据包装为响应式数据 import { reactive} from \\\'vue\\\'  const obj= reactive({     name : \\\'zs\\\',     age : 18 })

    2024年02月22日
    浏览(48)
  • Vue3 ref与reactive

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月24日
    浏览(58)
  • vue3使用ref和reactive

    目录 ​​​​​​​ vue3使用ref和reactive的方法 1.ref 2.reactive Vue 3 使用 ref 和 reactive 创建响应式对象的完整示例: 1.示例 2.示例说明 vue3使用ref和reactive的方法 Vue 3引入了两个新的API, ref 和 reactive ,用于创建响应式对象。这两个方法都位于 Vue.prototype 上,因此可以在组件实例

    2024年02月08日
    浏览(47)
  • Vue3的ref和reactive

    目录 1、ref的基本使用 2、reactive的基本使用 3、ref操作dom 4、ref与reactive的异同 ref创建数据可以是基本类型也可以是引用类型 ref函数创建响应式数据,返回值是一个对象 模版中使用ref数据,省略.value,js代码中不能省略 获取ref创建数据的值要加上.value   reactive创建响应式 reac

    2024年01月24日
    浏览(47)
  • vue3 ref 和 reactive 区别

    最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到 响应式数据问题,经百度查找相关笔记 ,在此记录一下,在实战中成长吧。 出现的问题 : 定义一个默认数组并且 for 循环展示,后端返回数据并且赋值到数组中,但是展示的值并不会修改 原因 : 在 js 中

    2023年04月09日
    浏览(62)
  • vue3 自动引入 ref reactive...

    npm i unplugin-auto-import -D vite.config.js Q : typescript 报错:‘reactive’ is not defined. A : TS 未识别到 vue api,没有相应的模块声明文件, 在 vite 中配置并生成 auto-imports.d.ts ,并在 tsconfig.json 中引入 vite.config.js tsconfig.json Q: eslint 无法识别报错 error ‘reactive’ is not defined no-undef A: 未配置

    2024年01月25日
    浏览(40)
  • 谈谈Vue3中的ref和reactive

    一、是什么? ref和reactive是Vue3中用来实现 数据响应式的API 一般情况下, ref 定义基本数据类型, reactive 定义引用数据类型 (我喜欢用它来定义对象,不用它定义数组,原因后面讲) 我理解的 ref本质上是reactive的再封装 二、先聊reactive reactive定义引用数据类型(以对象和数

    2023年04月21日
    浏览(38)
  • vue3中reactive和ref的比较

              用函数调用的方式生成响应式数据   推荐使用ref函数,更加灵活,小兔鲜项目主用ref

    2024年02月12日
    浏览(44)
  • vue3中的ref 和 reactive 定义数组

    在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型 但是也可以使用 ref 来定义数组 两种情况:定义时就将数组初始化、定义时未初始化数组 初始化数组 未初始化数组 但是这样定义的会出现

    2024年02月15日
    浏览(44)
  • vue3中 reactive和ref的区别

    在Vue 3中,reactive和ref都是用于响应式数据的API。它们的主要区别在于使用方式和返回值类型。 reactive函数用于将一个对象转换为响应式对象。它接收一个普通的JavaScript对象,并返回一个被代理的响应式对象。这意味着当响应式对象的属性发生更改时,Vue会自动检测到并重新

    2024年02月07日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包