Vue3+ts(day03:ref和reactive)

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

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学,可以点心心支持一下哈(笔记是根据b站上学习的尚硅谷的前端视频【张天禹老师】,记录一下学习笔记,用于自己复盘,有需要学习的可以去b站学习原版视频)

一、ref 创建(基本类型的响应式数据)

  • 作用:定义响应式变量。
  • 语法:let xxx = ref(初始值)。
  • 返回值:一个RefImpl的实例对象,简称ref对象或ref,ref对象的value属性是响应式的
  • 注意点:
    • JS中操作数据需要:xxx.value,但模板中不需要.value,直接使用即可。
    • 对于let name = ref('张三')来说,name不是响应式的,name.value是响应式的。
<template>
  <div class="person">
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script setup lang="ts" name="Person">
  import {ref} from 'vue'
  // name和age是一个RefImpl的实例对象,简称ref对象,它们的value属性是响应式的。
  let name = ref('张三')
  let age = ref(18)
  // tel就是一个普通的字符串,不是响应式的
  let tel = '13888888888'

  function changeName(){
    // JS中操作ref对象时候需要.value
    name.value = '李四'
    console.log(name.value)

    // 注意:name不是响应式的,name.value是响应式的,所以如下代码并不会引起页面的更新。
    // name = ref('zhang-san')
  }
  function changeAge(){
    // JS中操作ref对象时候需要.value
    age.value += 1 
    console.log(age.value)
  }
  function showTel(){
    alert(tel)
  }
</script>

二、reactive 创建(对象类型的响应式数据)

  • 作用:定义一个响应式对象(基本类型不要用它,要用ref,否则报错)
  • 语法:let 响应式对象= reactive(源对象)。
  • 返回值:一个Proxy的实例对象,简称:响应式对象。
  • 注意点:reactive定义的响应式数据是“深层次”的。
<template>
  <div class="person">
    <h2>汽车信息:一台{{ car.brand }}汽车,价值{{ car.price }}万</h2>
    <h2>游戏列表:</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <h2>测试:{{ obj.a.b.c.d }}</h2>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
    <button @click="test">测试</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive } from 'vue'

// 数据
let car = reactive({ brand: '迈巴赫', price: 200 })
let games = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a: {
    b: {
      c: {
        d: 666
      }
    }
  }
})

function changeCarPrice () {
  car.price += 10
}
function changeFirstGame () {
  games[0].name = '流星蝴蝶剑'
}
function test () {
  obj.a.b.c.d = 999
}
</script>

Vue3+ts(day03:ref和reactive),vue,vue.js,前端,vue3,reactive,ref

三、ref 创建(对象类型的响应式数据)

  • 其实ref接收的数据可以是:基本类型对象类型
  • 若ref接收的是对象类型,内部其实也是调用了reactive函数。
<template>
  <div class="person">
    <h2>汽车信息:一台{{ car.brand }}汽车,价值{{ car.price }}万</h2>
    <h2>游戏列表:</h2>
    <ul>
      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeCarPrice">修改汽车价格</button>
    <button @click="changeFirstGame">修改第一游戏</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref } from 'vue'

// 数据
let car = ref({ brand: '迈巴赫', price: 200 })
let games = ref([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])

function changeCarPrice () {
  car.value.price += 10
}
function changeFirstGame () {
  games.value[0].name = '流星蝴蝶剑'
}
</script>

四、ref 对比 reactive

宏观角度看:

  1. ref用来定义:基本类型数据对象类型数据
  2. reactive用来定义:对象类型数据

区别:

  1. ref创建的变量必须使用.value(可以打开设置里面的插件自动添加.value)。
  2. reactive重新分配一个新对象,会失去响应式(可以使用Object.assign去整体替换)。

先安装这个插件,之前老师推荐的插件好像不能用了

Vue3+ts(day03:ref和reactive),vue,vue.js,前端,vue3,reactive,ref

然后点击设置,找到扩展,如下图:

Vue3+ts(day03:ref和reactive),vue,vue.js,前端,vue3,reactive,ref

在扩展中找到vue,勾选Auto Insert:Dot Value

Vue3+ts(day03:ref和reactive),vue,vue.js,前端,vue3,reactive,ref

使用原则:

  1. 若需要一个基本类型的响应式数据,必须使用ref。
  2. 若需要一个响应式对象,层级不深,ref、reactive都可以。
  3. 若需要一个响应式对象,且层级较深,推荐使用reactive。

五、toRefs 与 toRef

  • 作用:将一个响应式对象中的每一个属性,转换为ref对象(适用于解构对象时使用)
  • 备注:toRefs与toRef功能一致,但toRefs可以批量转换。
  • 语法如下:
<template>
  <div class="person">
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2>性别:{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs,toRef} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
    
  // 通过toRefs将person对象中的n个属性批量取出,且依然保持响应式的能力
  let {name,gender} =  toRefs(person)
    
  // 通过toRef将person对象中的gender属性取出,且依然保持响应式的能力
  let age = toRef(person,'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

六、computed

作用:根据已有数据计算出新数据(和Vue2中的computed作用一致)。文章来源地址https://www.toymoban.com/news/detail-859645.html

<template>
  <div class="person">
    姓:<input type="text" v-model="firstName"> <br>
    名:<input type="text" v-model="lastName"> <br>
    全名:<span>{{fullName}}</span> <br>
    <button @click="changeFullName">全名改为:li-si</button>
  </div>
</template>

<script setup lang="ts" name="App">
  import {ref,computed} from 'vue'

  let firstName = ref('zhang')
  let lastName = ref('san')

  // 计算属性——只读取,不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */


  // 计算属性——既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })

  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>

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

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

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

相关文章

  • Vue3 ref与reactive

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

    2024年01月24日
    浏览(58)
  • 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日
    浏览(41)
  • 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

    一、是什么? 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)
  • Vue3 中应该使用 Ref 还是 Reactive?

    你可能会好奇:为什么我们需要使用带有  .value  的 ref,而不是普通的变量?为了解释这一点,我们需要简单地讨论一下 Vue 的响应式系统是如何工作的。 当你在模板中使用了一个 ref,然后改变了这个 ref 的值时,Vue 会自动检测到这个变化,并且相应地更新 DOM。这是通过一

    2024年02月20日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包