一:简介
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
优势(相比VUE2):
打包时间: 提升了41%
初次渲染速度 提升了55% 更新渲染速度133%
内存减少了 54%
升级:
Proxy替代defineProperty实现响应式
重写虚拟DOM实现Tree-Shaking
二:创建项目的方式
1、基于vue-cli创建
检查版本
vue --version
安装或者 升级vue /cli
npm i -g @vue/cli
执行创建命令
vue create 项目名
2、基于vite创建项目
vite的优势:
轻量快速的热重载、通用的插件
对TypeScript、JSX、CSS等的支持开箱即用。
真正的按需编译,不需要等待应用程序的完成
步骤:
安装环境: npm install -g vite
创建项目:npm create vue@latest
然后输入项目名
是否使用 TypeScript 语法? ... 是
剩下全都是 ... 否
创建成功后
cd 项目名
npm i 项目初始化 (下载依赖)
npm run dev 启动项目
三:setup
setup是Vue3中一个新的配置。值是一个函数,
是组合式API结构。组件中用到的方法 数据 计算属性 监视等 配置在setup中。
使用return返回 数据 方法 等 可以在模板中直接使用。
setip中不能使用 this关键字 this: undefined
setup 函数会在beforeCreate之前调用,它是领先所有的 “钩子执行的”
setup语法糖
setup有一个语法糖,可以让我们讲setup独立出来
<!--setup语法糖-->
<script setup lang="ts">
console.log("this:", this)
//数据 原来是写在data中的
//此时 数据不是响应式的
let uName = "张三";
let uAge = 20;
let uTel = "15339253326";
//方法 原来写在methods中
const changeName = () => {
uName = "zhang-san"
console.log(uName)
}
const changeAge = () => {
uAge += 1;
console.log(uAge)
}
const showTel = () => {
console.log("联系方式:", uTel)
}
</script>
四:简化name属性
name属性是这样进行展示的
<script lang="ts">
export default {
name: "Person"
}
</script>
但是移除setup之后就要为name单独写一个script,这没必要,我们可以给它加入一个插件,把name属性进行简化。
使用插件简化
安装:npm i vite-plugin-vue-setup-extend -D
配置:
在vite.config.ts 文件中
1.引入:import vueSetupExtend from 'vite-plugin-vue-setup-extend'
2.配置
plugins: [
vue(), vueSetupExtend()
],
3.使用
<script setup lang="ts" name="Person">
//把name属性变成script的属性
App.vue
<template>
<Person></Person>
</template>
<script lang="ts" setup name="App">
//引入Person组件 也模板直接使用
import Person from "@/components/Person.vue";
</script>
五:基本类型的响应式数据(ref)
作用:定义响应式变量
引入 :import {ref} from "vue";
语法: let xxx = refu(初始值)
返回值:是一个RefImpl实例对象, 实例对象的value属性是响应式
注意:在模板中不需要 xxx .value
对于:let name = ref("张三") (RefImpl实例) name 不是响应式,而name.value是响应式
<template>
<h2>姓名:{{ uName }}</h2>
<h2>年龄:{{ uAge }}</h2>
<h2>电话:{{ uTel }}</h2>
<button @click="changeName">更新姓名</button>
<button @click="changeAge">更新年龄</button>
<button @click="showTel">点击查看联系方式</button>
</template>
<!--setup语法糖-->
<script setup lang="ts" name="Person">
//数据 原来是写在data中的
import {ref} from "vue";
let uName = ref("张三");
//ref >> RefImpl >> value << 张三
let uAge = ref(20);
let uTel = "15339253326";
//方法 原来写在methods中
const changeName = () => {
//编译错误
uName.value += "~";
console.log(uName.value)
}
const changeAge = () => {
uAge.value += 1;
console.log(uAge)
}
const showTel = () => {
console.log("联系方式:", uTel)
}
</script>
<style scoped>
</style>
六:对象类型的响应式数据 (reactive)
作用:定义一个响应式对象reactive (基本类型不能使用,基本类型要用ref)
引入reactive:import {reactive} from "vue";
格式:let 响应式对象 = reactive(源对象)
返回值:reactive 返回一个 Proxy实例对象,响应式对象
注意:reactive定义的响应式数据是深层次
<template>
<h2>汽车信息:一台{{ car.brand }}汽车,价值:{{ car.price }}万</h2>
<button @click="changeCarPrice">修改汽车价格</button>
<hr/>
<h2>游戏列表</h2>
<ul v-for="(g,index) in games" :key="g.id">
{{ g.name }}
</ul>
<button @click="changeFirstGame">修改第一个游戏</button>
<hr/>
<h2>d:{{ obj.a.b.c.d }}</h2>
<button @click="changeD">修改d</button>
</template>
<script lang="ts" setup name="Person">
import {reactive} from "vue";
import {nanoid} from "nanoid";
console.log(nanoid())
let car = reactive({brand: '比亚迪', price: 100})
let games = reactive([
{id: nanoid(), name: '测试数据A'},
{id: nanoid(), name: '测试数据B'},
{id: nanoid(), name: '测试数据C'}
])
let obj = reactive({a: {b: {c: {d: 888}}}});
//修改 汽车价格
const changeCarPrice = () => {
car.price += +1;
console.log(car)
}
const changeFirstGame = () => {
games[0].name = "测试数据D";
console.log(games)
}
const changeD = () => {
obj.a.b.c.d = 666;
console.log(obj)
}
</script>
<style scoped>
</style>