vue3-基本属性更新

这篇具有很好参考价值的文章主要介绍了vue3-基本属性更新。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 介绍

Vue3的基本属性:

  1. 组合式API(Composition API):

组合式API是Vue3最核心的特性之一,它允许开发者将逻辑相关的选项组合在一起,提高代码的可维护性和可读性。组合式API主要体现在setup函数中,setup函数是一个新的组件选项,用于在组件创建之前执行一些逻辑。

  1. 响应式系统重构

Vue3对响应式系统进行了重构,使用Proxy重写,使得性能得到大幅提升。同时,Vue3还引入了ref和reactive两种新的响应式API,提供更灵活的响应式数据管理方式。

  1. 性能提升

Vue3在性能方面进行了全面优化,包括但不限于:虚拟DOM的优化、编译器的优化、响应式系统的优化等。根据官方数据,Vue3的性能提升达到了2倍以上。

2. 语法糖

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

<template>
 <div></div>
</template>

<style>
</style

script标签添加 setup标记,不需要再写导出语句,默认会添加导出语句

3. 响应式数据 - reactive和ref函数

3.1 reactive

  • 接受对象类型数据的参数传入,并返回一个响应式的对象
<script setup>
 // 导入
 import { reactive } from 'vue'
 // 执行函数 传入参数 变量接收
 const state = reactive({
   msg:'this is msg'
 })
 const setSate = ()=>{
   // 修改数据更新视图
   state.msg = 'this is new msg'
 }
</script>

<template>
  {{ state.msg }}
  <button @click="setState">change msg</button>
</template>

注:仅支持传入 对象类型的参数,返回响应式数据

3.2 ref(推荐)

  • 接收简单类型或者对象类型的数据传入并返回一个响应式的对象
<script setup>
 // 导入
 import { ref } from 'vue'
 // 执行函数 传入参数 变量接收
 const count = ref(0)
 const setCount = ()=>{
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>

<template>
  <button @click="setCount">{{count}}</button>
</template>

注:支持传入 对象类型和简单类型 的参数,返回响应式数据 — 推荐

使用说明:

  1. 在js中使用,需要带上.value,因为默认生成的响应式数据是对象,数据会封装到对象的value中
  2. 在元素中访问,不需要带.value
  3. 推荐使用ref函数

3.3 reactive 对比 ref

  • 相同点:都是用来生成响应式数据

  • 不同点:

    1. reactive不能处理简单类型的数据

    2. ref参数类型支持更好,但是必须通过.value做访问修改

    3. ref函数内部的实现依赖于reactive函数

4. 计算属性 - computed

计算属性基本思想和Vue2保持一致,组合式API下的计算属性只是修改了API写法

如下:使用

<script setup>
  // 导入
  import {ref, computed } from 'vue'
  // 原始数据
  const count = ref(0)
  // 计算属性
  const doubleCount = computed(()=>count.value * 2)

  // 原始数据
  const list = ref([1,2,3,4,5,6,7,8])
  // 计算属性list
  const filterList = computed(() => list.value.filter(item => item>2))
</script>

5. 监听器 - watch

在 Vue 3 中,watch 依然是一个用于监听数据变化并执行相应操作的功能

5.1 监听基本类型或ref

const number = ref(0);
watch(number, (newValue, oldValue) => {
  console.log(`新值: ${newValue}, 旧值:${oldValue}`);
});

5.2 监听复杂类型

  • 监听整个对象属性变化
<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
	const user = ref({ name: '张三', age: 30 });
  // 2. 调用watch 侦听变化
  watch(user, (newValue, oldValue)=>{
    console.log(`count发生了变化,老值为${oldValue},新值为${newValue}`)
  },{
    deep: true, // 深度监听,即监听对象内部属性的变化。
    immediate: true // 立即执行一次
  })
</script>

注:watch的第三个参数是一个对象,可以配置监听的选项

  1. 如deep(深度监听)、immediate(立即执行)和flush(回调的执行时机)。
  2. deep: true表示深度监听,即监听对象内部属性的变化。
  3. immediate: true表示立即执行,即在监听开始后立即执行一次回调。
  4. flush可以设置为’pre’或’post’,分别表示在组件更新之前或之后执行回调。
  • 监听对象的一个属性变化
const user = ref({ name: '张三', age: 30 });
watch(() => user.value.name, (newValue, oldValue) => {
  console.log(`用户名从 "${oldValue}" 变为 "${newValue}"`);
});

5.3 停止监听

watch会返回一个函数,调用这个函数可以停止监听。

如下:文章来源地址https://www.toymoban.com/news/detail-816715.html

// 创建响应对象 user
const user = ref({ name: '张三', age: 30 });
// 监听
const stopWatcher = watch(() => user.value.age, (newValue, oldValue) => {
  console.log(`年龄从 "${oldValue}" 变为 "${newValue}"`);
});
// 修改年龄
const updateUser = () => { user.value.age++ }

<template>
 <button @click="updateUser">增加年龄</button>
 <button @click="stopWatcher">停止监听</button>
</template>

到了这里,关于vue3-基本属性更新的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 前端系列-Vue3基本语法

    # 插值操作 1、插值:{{}} 2、指令:v-     在{{}}和v-指令进行数据绑定时,支持js单个表达式     p v-once{{msg}}/p 数据只第一次时显示,不响应式     p v-pre{{msg}}/p 内容原封不动的展示     p v-text=\\\'msg\\\'/p 相当于插值表达式的功能     p v-html=\\\'title\\\'/p 可以解析标签     # 绑定属

    2024年02月09日
    浏览(51)
  • 【前端vue3面试题】2023最新面试实录vue3.0,高频10问(持续更新...)

    前端vue3面试题 2023最新面试实录vue3.0,高频10问(持续更新…) 1问: vue3和vue2有哪些不同? 响应式系统的重构,使用proxy替换Object.defineProperty属性,优势: Proxy可直接监听 对象 添加/删除 属性; Proxy直接监听 数组的变化 Proxy监听的目标是对象本身,不需要像Object.defineProperty那样遍

    2023年04月14日
    浏览(51)
  • Web前端 ---- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    目录 前言 computed watch watch侦听ref数据 ref简单数据类型 ref复杂数据类型 watch侦听reactive数据 本文介绍在vue3中的computed计算属性和watch侦听属性。介绍watch如何侦听被ref和reactive包裹的数据 在vue3中,计算属性computed也是组合式api,也就是说要先引入,再在setup中使用 语法 完整:

    2024年01月18日
    浏览(62)
  • Vue3前端开发,如何获取组件内dom对象以及子组件的属性和方法

    Vue3前端开发,借助Ref来获取组件内dom对象,借助defineExpose编译宏可以获取到子组件的属性和方法。 app入口文件,我们作为父组件,在里面调用了自定义组件TestCom.vue。 先做了一个测试,借助于ref来访问自身的dom对象。如图所示是可以拿到的。 ref又称谓钩子函数,在vue2版本中

    2024年01月22日
    浏览(61)
  • 【前端技术】Vue3 01:初识 Vue.js

    Vue 可以说是非常流行了,至少在国内是这样,他是个轻量级的 JavaScript 框架,非常适合构建大型和中小型的 Web 应用程序,如果想和前端打交道,应该绕不过这个框架吧。 目录 1 Vue.js 介绍 2  IDE 选择 2.1 vscode 2.2 WebStorm 2.3 Eclipse 3  创建 Vue 应用 3.1 本地脚手架创建 ① 安装

    2024年02月02日
    浏览(64)
  • 前端(四)——vue.js、vue、vue2、vue3

    😊博主:小猫娃来啦 😊文章核心: vue.js、vue、vue2、vue3从全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一个版本,也称为Vue 1.x。它于2014年首次发布,并获得了广泛的应用和认可。 Vue2:Vue.js的第二个版本,也称为Vue 2.x。它在Vu

    2024年02月12日
    浏览(79)
  • 前端HTML、CSS、JS、VUE3 汇总

    学习https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 使用VS Code运行前端代码 在VS Code上安装前端插件 正在更新中~ ✨ 提示:这里可以添加本文要记录的大概内容: 学习路线 知识定位 HTML基础 标签、表格、表单、

    2024年02月13日
    浏览(51)
  • vue中vuex的五个属性和基本用法,另加js-cookie的使用

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。 state, getters, mutations, actions, modules。 1. state: vuex的基本数据,用来存储变量 2. geeter: 从基本数据(state)派生的数据,相当于state的计算属性 3.

    2024年02月14日
    浏览(43)
  • vue3使用工作流bpmn.js实现保存 ,新增,修改 ,右边工具栏自定义,属性栏自定义

    vue3使用工作流bnpm.js实现保存 ,新增,修改 ,右边工具栏自定义,属性栏自定义

    2024年02月13日
    浏览(36)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包