首页 > 其他分享 >02 Vue3核心语法

02 Vue3核心语法

时间：2024-04-12 10:14:35浏览次数：25  
标签：02 name age value 语法 reactive let Vue3 ref

选项式API OptionsAPI 和 组合式API CompositionAPI

Vue2的API设计是Options（配置）风格的，就是选项式API
Vue3的API设计是Composition（组合）风格的，就是组合式API

选项式API的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用
image
image

Composition API 组合式API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起
image
image

setup

setup是Vue3中一个新的配置项，值是一个函数，它是 Composition API “表演的舞台”，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在setup中

setup的特点

  • setup函数返回的对象中的内容，可直接在模板中使用。
  • setup中访问this是undefined
  • setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的
<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 lang="ts">
  export default {
    name:'Person',
    setup(){
      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
      let name = '张三'
      let age = 18
      let tel = '13888888888'

      // 方法，原来写在methods中
      function changeName(){
        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
        console.log(name)
      }
      function changeAge(){
        age += 1 //注意：此时这么修改age页面是不变化的
        console.log(age)
      }
      function showTel(){
        alert(tel)
      }

      // 返回一个对象，对象中的内容，模板中可以直接使用
      return {name,age,tel,changeName,changeAge,showTel}
    }
  }
</script>

setup 的返回值

若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用（重点关注）。

若返回一个函数：则可以自定义渲染内容，代码如下：

setup(){
  return ()=> '你好啊！'
}

setup 与 Options API 的关系

Vue2 的配置（data、methos......）中可以访问到 setup中的属性、方法，但在setup中不能访问到Vue2的配置（data、methos......）

如果与Vue2冲突，则setup优先

setup 语法糖

setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：

<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
  }
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据（注意：此时的name、age、tel都不是响应式数据）
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意：此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意：此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

ref 和 reactive 创建响应式数据

ref 创建：基本类型和对象数据类型的响应式数据

作用：定义响应式变量，接收的数据可以是：基本类型、对象类型

若ref接收的是对象类型，内部其实也是调用了reactive函数

语法：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>

ref 创建 对象类型的响应式数据

<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 { ref } from 'vue'

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

console.log(car)

function changeCarPrice() {
  car.value.price += 10
}
function changeFirstGame() {
  games.value[0].name = '流星蝴蝶剑'
}
function test(){
  obj.value.a.b.c.d = 999
}
</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: 100 })
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>

ref 和 reactive 的对比

1. 定义的对象不同

ref用来定义：基本类型数据、对象类型数据

reactive用来定义：对象类型数据

2. 使用方式不同

ref创建的变量必须使用.value才可以获取对应的数值

可以使用volar插件自动添加.value
image

reactive创建的变量直接以对象的方式 对象.name 就可以获取值

reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）

let obj=reactive({id:1,name:'张三'})

# 如果直接赋值替换，会失去响应式
obj={id:2,name:'李四'}

# 可以采用 `Object.assign` 重新赋值，不会失去响应式
Object.assign(obj,{id:2,name:'李四'})

使用原则总结

若需要一个基本类型的响应式数据，必须使用ref

若需要一个响应式对象，层级不深，ref、reactive都可以

若需要一个响应式对象，且层级较深，推荐使用reactive

toRefs 与 toRef : 转为 ref 对象

作用：将一个响应式对象中的每一个属性，转换为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>

标签：02,name,age,value,语法,reactive,let,Vue3,ref
From： https://www.cnblogs.com/songxia/p/18130591

相关文章

  • 【2024-04-11】想换电脑
    20:00读书要用两只眼睛，一-只看纸面上的，另一只看纸的背面。                                                 ——俞鸿儒今天一位同事换了新电脑，喊我过去看了一下，嗯，还......
  • 50 Vue3常用扩展插件
    在setup的script标签中去指定组件名字1.安装npmivite-plugin-vue-setup-extend-D2.配置vue.config.tsimport{defineConfig}from'vite'importVueSetupExtendfrom'vite-plugin-vue-setup-extend'exportdefaultdefineConfig({plugins:[VueSe......
  • 01 Vue3简介
    介绍性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking拥抱TypeScriptVue3可以更好的支持TypeScript新的特性1.组合是API(CompositionAPI)setup......
  • 【译】Visual Studio 中的 GitHub Copilot：2023年回顾
    在快速发展的软件开发世界中，保持领先是至关重要的。在VisualStudio中引入AI，特别是GitHubCopilot，已经彻底改变了开发人员的编码方式。通过将Copilot集成到VisualStudio中，您可以利用AI来简化工作流程，管理大型代码库，分析异常，甚至生成提交消息。这就像有一个知识渊博......
  • 2022年蓝桥杯C++B组国赛-试题D-最大数字
    0.题目问题描述给定一个正整数N。你可以对N的任意一位数字执行任意次以下2种操作：将该位数字加1。如果该位数字已经是9,加1之后变成0。将该位数字减1。如果该位数字已经是0,减1之后变成9。你现在总共可以执行1号操作不超过A次,2号操作不超过......
  • 2024.4.11
    所学时间：2小时代码行数：81博客园数：1篇所学知识：我的结对作业伙伴是龚涵彬，我们今天写迪杰斯特拉算法，用来解决最短路径问题，定义了一个名为Dijkstra的类，其中包含了计算最短路径的静态方法calculate和一些辅助方法。类中使用了HashMap<Station,Result>result来存储每个站点到目标......
  • 2024年3月文章一览
    2024年3月编程人总共更新了12篇文章：1.2024年2月文章一览2.ProgrammingAbstractionsinC阅读笔记：p308-p3113.ProgrammingAbstractionsinC阅读笔记：p312-p3264.ProgrammingAbstractionsinC阅读笔记：p327-p3305.ProgrammingAbstractionsinC阅读笔记：p331-p3376.《自动......
  • 02-APIView和序列化
    常规通过CBV的写法#models.pyfromdjango.dbimportmodelsclassBook(models.Model):name=models.CharField(max_length=32)price=models.IntegerField()publish=models.CharField(max_length=64)classMeta:db_table="book&qu......
  • #6912. 「梦熊省选难度挑战赛 2023」奇迹之夜
    #6912.「梦熊省选难度挑战赛2023」奇迹之夜树形dp调的好折磨。距离小于交通范围\(L\)的一定是举办聚会，所以可以预处理出\(g_i\)表示深度小于\(i\)的都开聚会的总人气和。其次可以建聚会时一定也能建日常活动，所以直接\(w_i=\max(w_i,m_i)\)，方便转移。对于大于等于\(......
  • 2024.04.11 树上问题回顾
    2024.04.11树上问题回顾P2015二叉苹果树树形背包板子题。需要注意的是，枚举儿子\(v\)的选择数量\(k\)时，一定要先转移\(k=0\)的情况，否则就会用新状态来重复更新新状态，违背\(0/1\)背包的思路。#include<bits/stdc++.h>usingnamespacestd;template<typenameT>in......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99