vue3和vue2的区别
1，vue3首次渲染更快（Vue3在编译和渲染性能上有了很大的提升，主要是因为使用了Proxy代理和优化算法，使得组件可以更快的渲染）
2，diff算法更快
3，内存占用体积变得更小
4，打包体积变得更小
5，更好的ts支持（这里不是因为vue3是ts写的，所以更加支持ts，是因为Vue3对TS的支持更加完善了，包括更好的类型推断和类型定义）
6，Composition API（vue3中引入了Composition API，他是一种新的组合式API，可以帮助我们更好的组织和复用逻辑代码，而不是像Vue2那样只能使用Options API）
vite和传统的webpack的区别
1，构建速度（vite的构建速度比webpack快很多，因为Vite使用了ES Modules来实现快速的热更新，也就是支持热加载。webpack则需要每次修改代码之后重新打包整个应用。这样每次保存看效果很麻烦）
2，开发体验（vite提供了一种更加流畅的开发体验，因为它可以在浏览器中直接运行代码，而不需要重新打包整个应用，开发很舒服）
3，配置（vite配置非常简单，因为它使用了约定优于配置的原则。相比之下webpack的配置比较复杂，需要花费一定时间学习配置）
4，插件生态（webpack插件生态比vite更加丰富，因为webpack存在时间，非常的长了。但是vite发展非常壮大）
webpack先打包然后启动服务器
vit会提供一个服务器，立即启动，然后打包，支持热更新，打包使用Rollup
使用vite创建vue3的项目
$ npm create vite@latest $ yarn create vite $ pnpm create vite
Project name: ... vite-dome1,项目名称
Select a framework: » Vue 创建名称
Select a variant: » JavaScript 使用语言
cd vite-dome1 //进入项目 npm i //装包 npm run dev //启动项目
type='module'绑定es6的代码和模板
学习vue3语法
创建完成项目之后开始学习vue3的语法
setup函数
setup是vue3特有的选项，作为API的起点
从组件的生命周期来看，他在beforCreate之前执行，函数this不是组件实例，是undefined，如果数据或者函数在模板中使用，需要使用setup进行返回
<script>
import { ref } from 'vue'
export default {
name: 'App',
/**
* 这里是组合式APi入口，比beforeCreate执行更早
* vue3中没有this组件实例，所以在这里可以直接使用ref
*/
setup() {
const show = ref(true)
const toggie = () => {
show.value = !show.value
}
return { show, toggie }
},
beforeCreate() {
console.log(`beforeCreate`)
}
}
</script>
<template>
<div>
<button @click="toggie">点击显示或者隐藏图片</button>
<hr>
<img src="" alt="暂无图片" v-show="show">
</div>
</template>
<style scoped>
</style>
setup语法糖
setup函数每次会有一个返回值，每次还要创建一个函数，太麻烦了，所以vue3提供了setup语法糖。
<script setup>
import { ref } from 'vue'
const show = ref(true)
const toggie = () => {
show.value = !show.value
}
</script>
<template>
<div>
<button @click="toggie">点击显示或者隐藏图片</button>
<hr>
<img src="" alt="暂无图片" v-show="show">
</div>
</template>
<style scoped>
</style>
这样我们不需要定义setup函数，不需要返回值，不需要export default
ref函数--简单数据类型响应式
在setup函数中，使用ref函数，传入普通数据（简单or复杂）返回一个响应式数据
<script setup>
import { ref } from 'vue'
const num = ref(0)
const add = () => {
num.value++
}
const obj = ref({
name: 'zhangsan',
age: 18
})
const change = () => {
obj.value.name = 'lisi'
}
</script>
<template>
<div>
<h1>{{ num }}</h1>
<button @click="add">add</button>
<h1>{{ obj.name }}</h1>
<button @click="change">change</button>
</div>
</template>
<style scoped>
</style>
注意点：使用ref创建数据，js中的.value,template可以省略
reactive函数--复杂数据类型响应式
通常使用它定义对象类型的响应式数据
vue2中data函数中返回的对象数据是一个响应式数据，现在setup中返回的对象数据是响应式数据吗？
不是的，需要使用reactive进行转换
在setup函数中，使用reactive函数，传入一个普通对象，返回一个响应式数据对象，最后在setup函数中返回一个对象。
reactive函数通常定义：复杂数据类型，可以转换普通数据类型吗？不能
<script setup>
import { reactive } from 'vue'
const state = reactive({
name: `王路飞`,
age: 18
})
const changeName = () => {
state.name = `路飞`
}
// const name = reactive(`王路飞`) // reactive不能将基本类型转换为响应式数据
// const age = reactive(18)
// let changeName = () => {
// name = `路飞` // 会报错,因为name是只读的
// }
</script>
<template>
<div>
<h1>{{ state.name }}</h1>
<h1>{{ state.age }}</h1>
<button @click="changeName">改名</button>
</div>
</template>
<style scoped>
</style>
注意点：reactive不能转换普通数据类型为响应式数据
reactive和ref的选择
reactive可以转换对象成为响应式数据对象，但是不支持简单数据类型
ref可以转换简单数据类型为响应式数据对象，也可以支持复杂数据类型，但是操作的时候需要使用到.value
如果确定数据类型是对象，且字段和名称也确定，可以使用reactive转换成响应式数据，其他都使用ref，这样就没有心里负担
computed函数--计算属性
在setup函数中，使用computrd函数，传入一个函数，函数返回计算好的数据
最后setup函数返回一个对象，包含该计算属性数据即可，然后模板内使用
<script setup>
import { ref,computed } from 'vue'
const list = ref([1,2,3,4,5])
// 数据筛选出偶数
const even = computed(() => list.value.filter(n => n % 2 === 0))
// 当数据发生变化的时候
setTimeout(() => {
list.value.push(6,9)
}, 2000)
</script>
<template>
<div>
<h1>Vue3 Review</h1>
<ul>
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
<ul>
<li v-for="item in even" :key="item">{{item}}</li>
</ul>
</div>
</template>
<style scoped>
</style>
watch函数--属性侦听器
watch属性侦听器监听数据的变化，使用watch监听一个响应式数据，使用watch监听多个响应式数据，使用watch监听响应式对象数据中一个属性（见到那数据类型），使用watch监听响应式对象数据中一个属性（复杂数据类型）配置深度监听，使用watch监听配置默认执行
使用watch监听一个响应式数据
<script setup>
import { ref,watch,reactive } from 'vue'
const count = ref(0)
// watch监听一个响应式
watch(count,(newVal,oldVal)=>{
console.log(newVal,oldVal)
})
</script>
<template>
<div>
计数器：{{count}}
<button @click="count++">+</button>
</div>
</template>
<style scoped>
</style>
使用watch监听多个响应式数据
<script setup>
import { ref,watch,reactive } from 'vue'
// watch监听多个响应式
const user = reactive({
name:`jack`,
info:{
age:18,
gender:`男`
}
})
// watch监听多个响应式
watch([user],()=>{
console.log('改变')
console.log(user.name)
})
</script>
<template>
<div>
名字:{{user.name}}
年龄:{{user.info.age}}
<button @click="user.name = '路飞'">修改名称</button>
</div>
</template>
<style scoped>
</style>
使用watch监听对象的一个属性，简单数据类型
<script setup>
import { ref,watch,reactive } from 'vue'
const count = ref(0)
const user = reactive({
name:`jack`,
info:{
age:18,
gender:`男`
}
})
// 监听对象一个属性,简单类型
watch(()=>user.name,()=>{
console.log(user.name)
console.log('user.name改变了')
})
</script>
<template>
<div>
名字:{{user.name}}
<button @click="user.name = '黑胡子'">修改名称</button>
</div>
</template>
<style scoped>
</style>
使用watch监听对象一个属性，复杂数据类型
<script setup>
import { ref,watch,reactive } from 'vue'
const count = ref(0)
const user = reactive({
name:`jack`,
info:{
age:18,
gender:`男`
}
})
// 监听对象一个属性,复杂类型
watch(()=>user.info.age,()=>{
console.log(user.info.age)
console.log('user.info.age改变了')
},{
// 开启深度监听
deep:true
})
</script>
<template>
<div>
<button @click="user.info.age = 50">点击修改年龄</button>
</div>
</template>
<style scoped>
</style>
开启默认监听
<script setup>
import { ref,watch,reactive } from 'vue'
const count = ref(0)
const user = reactive({
name:`jack`,
info:{
age:18,
gender:`男`
}
})
// 默认执行
watch (count,()=>{
console.log('默认执行')
},{
immediate:true
});
</script>
<template>
<div>
计数器：{{count}}
<button @click="count++">+</button>
<br>
名字:{{user.name}}
年龄:{{user.info.age}}
<button @click="user.name = '路飞'">修改名称</button>
<button @click="user.name = '黑胡子'">修改名称</button>
<br>
<button @click="user.info.age = 50">点击修改年龄</button>
</div>
</template>
<style scoped>
</style>
每次数据发生变动都会进行数据的劫持
标签：const,name,setup,computde,watch,语法,reactive,user,ref From： https://www.cnblogs.com/hgng/p/17254584.html