江苏龙网

  1. 主页 > 生活百科 > >

Vue3.2 语法基础详解

Vue3.2

前言

官网地址：
https://staging-cn.vuejs.org/
vue最新版分为两个版本： Vue3.0（20年9月18日） Vue 3.2 （21年8月10日）
#Vue 3.2 +Vite+volar
Vue3 框架做了大量的性能优化，包括虚拟 DOM，编译模板、代理的新数据监听，体积更小的打包文件等 。
新的组合式 API （composition-api），更适合大型项目的构建，去除繁琐的 this 操作；
由于是基于 TypeScript 编写，对 TypeScript 原生支持更好，更强大的智能类型推导功能；
生命周期的一些改变，vue2 中的 beforeCreate 和 created 被一个新增的 setup 生命周期函数代替；
一些常见 API 如 v-model 的变化，支持对一个组件同时进行多个 v-model 的数据绑定 。
vscode 的插件 vetur 对vue3 的composition API语法支持度非常弱，所以开发vue3项目需要将vetur禁用 更换另一个插件
开发vue3安装并使用： volar 插件
#1.项目创建
Vite 官网：https://cn.vitejs.dev/
yarn create vite my-vue-App --template vue#2.SFC 单文件组件
html 部分变化不大
vue2的 template 中只能有一个子节点，vue3的 template 中可以写多个子节点
js 部分内置ts，但是vite创建的项目没有开启，<script lang="ts" setup> 这样写即可支持ts
新增setup 语法糖，js代码大量简化
代码中不再出现 this
css 代码中 可以使用v-bind 指令
<template><div></div></template><script setup>let color = '#f60';</script><style scoped>.box{width: 100px;height: 100px;background: v-bind(color);}</style>#2. setup语法糖
起初 Vue3.0 暴露变量必须 return 出来，template中才能使用； 这样会导致在页面上变量会出现很多次 。
vue3.2只需在script标签中添加setup,可以帮助我们解决这个问题 。
1.组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default，甚至是自定义指令也可以在我们的template中自动获得 。
#3.data 定义#3.1 直接定义 无响应式<template><div><h1>{{name}}</h1><!-- 这里双向绑定失效，直接定义变量没有响应式特性 --><input type="text" v-model="name"></div></template><script setup>let name = '张麻子';</script>#3.2 ref 定义基本数据类型 有响应式<template><div><h1>{{name}}</h1><!-- 修改数据 有响应式 --><input type="text" v-model="name"><button @click="setData">修改数据</button></div></template><script setup> import {ref} from 'vue';let name = ref('张麻子');//js中修改数据有响应式 const setData = https://www.isolves.com/it/cxkf/qd/2022-08-09/()=>{name.value = '黄四郎' }#3.3 reactvie 定义引用数据类型 有响应式<template><div><h2>{{user.name}}</h2><!-- 修改数据 有响应式 --><input type="text" v-model="user.name"><!-- 新增属性 --><button @click="addItem">新增属性</button></div></template><script setup>import {ref,reactive} from 'vue'let user = reactive({name:'张麻子',age:40})// js中新增对象属性-可以直接赋值和修改（有响应式），在ts环境下，vscode会提示错误，但在页面中可以正常渲染const addItem = ()=>{user.like='打豆豆'}</script>#4.methods 方法定义<template><div><!-- 年龄 + --><h1>{{user.age}}</h1><!-- 调用方法 --><button @click="addAge">年龄+</button></div></template><script setup>import { ref, reactive } from "vue";let user = reactive({name: "张麻子",age: 40,});//方法const addAge=()=>{user.age++;}//方法调用方法const getUserInfo=()=>{addAge()console.log(user.age)}</script>#5.computed 计算属性<script setup>import { ref, reactive, computed } from "vue";let user = reactive({name: "张麻子",age: 40,});//计算属性const getAge = computed(()=>{return '我的年龄'+user.age})</script>#6.watch 使用watch(监听数据源,执行函数,[配置参数])//配置参数： 立即执行 深度监听{immediate: true, deep: true }#6.1 监听基本数据类型单一数据源<script setup>import {ref, watch} from 'vue' let name = ref('张麻子') //监听器watch(name,(newVal,oldVal)=>{console.log('变量发生了改变...',newVal);})</script>


推荐阅读


上一篇：揭秘短视频推荐系统的技术架构及四大模块

下一篇：Win11卡顿“罪魁祸首”已找到：22H2版本将修复