世界报道:Vue3从基础到精通

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

世界报道:Vue3从基础到精通

2023-02-22 18:54:34 来源：博客园

一、Vue3介绍
- 1. Vue3的变化
- 2. Vue2和Vue3的不同之处
二、Vue3创建项目
- 1.用vue-lci创建步骤
- 2.用vite创建步骤
三、setup函数
四、ref、reactive、toRefs
五、计算属性和监听属性
- 1.计算属性
- 2.监听属性
六、生命周期钩子

一、Vue3介绍

1. Vue3的变化

性能的提升：打包大小减少41%、初次渲染快55%、更新渲染快133%、内存减少54%
源码的升级：使用Proxy代替defineProperty实现响应式、重写虚拟DOM的实现和Tree-Shaking
拥抱TypeScript：Vue3可以更好的支持TypeScript
新的特性：Composition API（组合API、setup配置、ref与reactive、watch与watchEffect、provide与inject
新的内置组件：Fragment、Teleport、Suspense
新的声明周期钩子
data选项应始终被声明为一个函数移除keyCode支持作为v-on的修饰符

2. Vue2和Vue3的不同之处

Vue2：配置项API

用Vue2写代码

new vue ({el:"#app",data:{},methods:{}})

Vue3：组合式API

用Vue3写代码

(相关资料图)

let name = "mire"let add = ()=>{}

二、Vue3创建项目

1.用vue-lci创建步骤

更多详细讲解请戳这里：官方文档

跟创建Vue2的步骤一模一样！

更多详细讲解请戳这里：Vue-cli创建Vue项目

2.用vite创建步骤

vite是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！要使用 Vite 来创建一个 Vue 项目，非常简单，更多细节请戳>>>:新的构建前端项目工具vite官网构建项目最大优势就是快、极快，快的原因是：构建项目时没有下node-modules包，所以创建完之后还是要窒息cnpm install

具体步骤如下

# win+R输入cmd,进入终端，切换盘符到D盘D:

cnpm init vue@latest

# 切换到项目目录(pycharm终端)执行以下代码下载依赖cnpm install

# 运行项目需要在terminal执行以下代码npm run dev

到此咱的项目创建完成

或者新建运行项目窗口也可以的运行之后的页面展示

cli和vite创建Vue项目的对比

三、setup函数

基础代码写法如下

点击查看代码

<script>export default {  name: "HomeView",    let name = "米热"    let age = 18    let handleClick = () => {      alert("美女")    }    let handleAdd = () => {      age++      console.log(age)    }    return {name, age, handleClick, handleAdd}  }}</script>

tips:

以后配置项api不建议用了，使用组合式api，最核心就是setup函数
在setup里面写组合式api,setup 没有this了，使用变量直接用就行了
以后定义变量使用let，定义常量使用const，尽量不使用var
最后定义的变量和方法都要return
但是失去了响应式，不过我们的ref、reactive、toRers可以解决此问题

四、ref、reactive、toRefs

ref、reactive使用方法如下

点击查看代码

<script>import {ref, reactive} from "vue"export default {  name: "HomeView",  methods: {    handleName2() {      this.name = this.name + "?"    }  },  setup() {    let name = ref("米热")    let age = ref(18)    let userInfo = reactive({      name: "米热",      gender: "女"    })    let handleClick = () => {      alert("美女")    }    let handleAdd = () => {      age.value = age.value + 1  // 以后再改，必须用 xx.value改值      console.log(age)    }    let handleChange = () => {      console.log(userInfo)      userInfo.gender = "未知"    }    let handleName = () => {      name.value = name.value + "?"      console.log(name)    }    return {name, age, handleClick, handleAdd, handleName, userInfo, handleChange}  }}</script>

tips:

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
reactive定义的数据：操作数据与读取数据：均不需要.value

toRefs使用方法如下

点击查看代码

setup() {    let data = reactive({      name: "mire",      age: 18,      gender: "女"    })    return {...toRefs(data)}  }

tips:

以后setup的返回值可以直接使用
以后在模板中直接用 {{name}}

五、计算属性和监听属性

1.计算属性

点击查看代码

let person = reactive({   firstName: "",   lastName: "",  })  let fullName = computed(() => {    return person.firstName + person.lastName  })

2.监听属性

点击查看代码

# 组合式api写法，只要name发生变化，就会触发匿名函数执行   let name = ref("lqz")   watch(name, (newName, oldName) => {      console.log("name变了")      console.log("老的", oldName)      console.log("新的", newName)    })# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行    watchEffect(() => {      console.log(age.value)    })