目录
一、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函数
基础代码写法如下
点击查看代码
<template>
<div class="home">
<h1>setup的使用</h1>
<p>姓名：{{ name }}</p>
<p>年龄：{{ age }}</p>
<br>
<button @click="handleClick">点我看美女</button>
<button @click="handleAdd">点击年龄+1</button>
</div>
</template>
<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使用方法如下
点击查看代码
<template>
<div class="home">
<h1>ref和reactive的使用</h1>
<p>姓名：{{ name }}</p>
<p>年龄：{{ age }}</p>
<br>
<button @click="handleClick">点我看美女</button>
<button @click="handleAdd">点击年龄+1</button>
<button @click="handleName">点击名字后+？</button>
<button @click="handleName2">点击名字2后+？</button>
<hr>
{{ userInfo.name }}------ {{ userInfo.gender }}
<button @click="handleChange">点击修改性别</button>
</div>
</template>
<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)
})
六、生命周期钩子
首先咱来看看图解吧
几乎变化不大，
在Vue2的beforedestroy和destroyed
到了Vue3之后变成beforeMount和mounted