好看的网页千篇一律，有趣的代码万里挑一。
今晚跨年了，祝大家2022心想事成！万事如意！
这篇博客的关键字：
ref和reactive\脚手架\
这两个是全新的组合式API
新建一个index.html,画个盒子，简单设计一下，对
<div id="app">
<h4>姓名：{{name}}</h4>
<h4>学生：{{stu}}</h4>
<button @click="updateName">修改姓名</button>
<button @click="updateStu">修改学生</button>
</div>
引入vue3
script中敲码，看一看vue2和vue3的区别
let {ref,reactive} = Vue
Vue.createApp({
setup() {
let name = ref('张三')
let updateName = ()=>{
name.value = '张杰'
}
/* let stu = ref({
name:'李四',
age:20
})
let updateStu = ()=>{
// 注意：修改ref对象的值，每次都要先点value
stu.value.name = '李明'
stu.value.age = 30
} */
// reactive组合式API方法，根据源对象返回一个代理对象(Proxy对象)
let stu = reactive({
name:'李四',
age:20
})
let updateStu = ()=>{
// Proxy对象，不需要先点value
stu.name = '李明'
stu.age = 30
}
return {
name,
updateName,
stu,
updateStu
}
}
}).mount('#app')
Vue-Cli
Vue CLI 4.x以上，Node.js版本 8.9以上
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# 查看版本
vue --version
# 创建项目
vue create hello-world
# 运行
npm run serve
main.js
// vue2
/* import Vue from 'vue'
import App from './App.vue'
new Vue({
render:h=>h(App)
}).$mount("#app") */
// vue3
// 从vue中导入createApp方法，通过这个方法，创建vue实例
import { createApp } from 'vue'
// 导入App组件
import App from './App.vue'
// 通过createApp方法创建一个vue实例，渲染App组件，并将结果挂载到#app容器中。
createApp(App).mount('#app')
Vite
Vite 需要 Node.js版本 12.0以上
这是尤雨溪开发出的最新的一个框架
感兴趣可以看看官网
vite
计算属性
<h2>计算属性</h2>
<div>姓：<input type="text" v-model="firstName">名：<input type="text" v-model="lastName"></div>
<div>姓名：{{fullName}}<input type="text" v-model="fullName"></div>
// 在Vue3中，定义计算属性，需要引入computed组合式API
import {ref,computed} from 'vue'
export default {
// Vue2中的计算属性
// 数据
/* data() {
return {
firstName:'张',
lastName:'杰'
}
},
// 计算属性
computed:{
// 只读的计算属性
// fullName(){
// return this.firstName+'.'+this.lastName
// }
// 读写计算属性
fullName:{
//返回计算机属性的结果
get(){
return this.firstName+'.'+this.lastName
},
//修改计算属性的值
set(val){
let arr = val.split('.')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
} */
// Vue3中的计算属性
setup() {
let firstName = ref('张')
let lastName = ref('杰')
//computed()函数的参数是一个回调函数，回调函数的返回值，就是计算属性的返回值
// 定义只读的计算属性
// let fullName = computed(()=>{
// return firstName.value + '.' + lastName.value
// })
// 定义读写计算属性
let fullName = computed({
get(){
return firstName.value + '.' + lastName.value
},
set(val){
let arr = val.split('.')
firstName.value = arr[0]
lastName.value = arr[1]
}
})
return{
firstName,
lastName,
fullName
}
}
};
侦听器
侦听器的变化比较大，也很出彩。
大家都知道watch是十分耗性能的一件事，一旦开启深度监听，所有数据都要监听都要变化。vue3在这里就更加的细致，把监听的数据更加准确。还推出了watchEffect让监听数据更加方便。
watchEffect监听器，只有一个回调函数参数，并且没有参数
特点：
1.默认会执行一次
2.不需要明确监视谁，回调函数里面用到了谁，谁变了，就会重新执行回调函数。
<h2>侦听器</h2>
<div>薪资：{{money}}
<button @click="money+=1000">加薪</button>
</div>
<div>学生：{{stu}}
<button @click="stu.name='李四',stu.age=25">修改学生</button>
<button @click="stu.car.name='宝马',stu.car.price=40">学生换车</button>
</div>
// 引入组合式API watch 和 watchEffect
import {ref,reactive, watch, watchEffect} from 'vue'
export default {
// Vue2中的侦听器
/* //数据
data() {
return {
money:10000,
stu:{
name:'张三',
age:20,
car:{
name:'奔驰',
price:50
}
}
}
},
//侦听器
watch:{
//根据数据的名称定义一个方法，用于该方法去侦听该属性值是否发生变化（参数1是新值，参数2是旧值）
// 注意：默认情况下，侦听器一上来不会立刻执行，必须要侦听到值重新发生变化后，才执行。
// money(nval,oval){
// console.log(nval,oval);
// }
// 完整写法，侦听器定义成一个对象
money:{
//表示侦听器默认执行一次
immediate:true,
//定义侦听器的方法
handler(nval,oval){
console.log(nval,oval);
}
},
// 监听学生数据，注意：只有整个学生对象变化了才会监听到，如果只是修改对象身上的属性，监听不到。
// stu(nval,oval){
// console.log(nval,oval);
// }
// 解决方案：监听器改成一个对象
stu:{
//表示侦听器开启深度监视
deep:true,
handler(nval,oval){
console.log(nval,oval);
}
}
} */
// Vue3中的侦听器
setup() {
let money = ref(10000)
let stu = reactive({
name:'张三',
age:20,
car:{
name:'奔驰',
price:50
}
})
// watch函数有三个参数：1.侦听谁，2.回调函数，3.配置对象(可以省略)
// 简单用法：一上来没有立刻执行
// watch(money,(nval,oval)=>{
// console.log(nval,oval);
// })
// 完整用法：加上第三个参数，配置对象
watch(money,(nval,oval)=>{
console.log(nval,oval);
},{
//立刻执行
immediate:true,
})
// 监视reactive的数据，默认就开启深度监视，并且无法关闭
// watch(stu,(nval,oval)=>{
// console.log(nval,oval);
// })
// 对于reactive的数据，可以采用监视部分属性
watch(()=>stu.name,(nval,oval)=>{
console.log(nval,oval);
})
// 如果监视的是reactive里面的对象属性，默认是不开启深度监视的，需要手动开启
watch(()=>stu.car,(nval,oval)=>{
console.log(nval,oval);
},{
deep:true
})
//watchEffect监听器，只有一个回调函数参数，并且没有参数
// 特点：
// 1.默认会执行一次
// 2.不需要明确监视谁，回调函数里面用到了谁，谁变了，就会重新执行回调函数。
watchEffect(()=>{
console.log('我是watchEffect');
let m = money.value
let name = stu.name
})
return{
money,
stu
}
}
};
过滤器
vue2中的过滤器很鸡肋，vue3中直接抛弃了，过滤功能在method中实现。
<h2>过滤器</h2>
<div>薪资：{{toFixed2(money)}}</div>
<div>薪资：{{toFixed2Money}}</div>
export default {
data() {
return {
money:10000.12345
}
},
// 注意：在Vue2中可以定义过滤器，但是在Vue3中已经取消了过滤器。
/* filters:{
toFixed2(val){
return val.toFixed(2)
}
} */
// Vue3推荐我们使用方法 或 计算属性的方式，实现之前过滤器的效果。
methods: {
toFixed2(val){
return val.toFixed(2)
}
},
computed:{
toFixed2Money(){
return this.money.toFixed(2)
}
}
};
响应式
通常情况下：
1.基本类型的数据，选择用ref定义
2.引用类型的数据，选择用reactive定义
<h2>响应式</h2>
<div>薪资：{{money}} <button @click="updateMoney">涨薪</button></div>
<div>汽车：{{car}} <button @click="updateCar">换车</button></div>
<div>学生：{{stu}} <button @click="updateStu">修改学生</button></div>
//Vue3中的所有组合式API，都要采用按需引入的方式导入
import {ref,reactive} from 'vue'
export default {
//setup是所有组合式API的入口
setup() {
//使用ref定义基本类型数据
let money = ref(10000)
let updateMoney = ()=>{
money.value += 1000
}
//使用ref定义引用类型数据
// ref方法，返回的是ref对象，ref对象的value属性是一个代理对象(Proxy)
let car = ref({
name:'奔驰',
price:'50W'
})
let updateCar = ()=>{
// 注意：这里每次修改数据时，必须要先.value再.具体的属性
car.value.name = '宝马',
car.value.price = '40W'
}
// 注意：reactive只能定义引用类型（对象和数组）
// reactive方法，直接返回一个代理对象(Proxy)
let stu = reactive({
name:'张三',
age:20
})
let updateStu = ()=>{
stu.name = '李四'
stu.age = 25
}
// 总结：通常情况下：
// 1.基本类型的数据，选择用ref定义
// 2.引用类型的数据，选择用reactive定义
//setup方法里面返回出去的成员，在模板可以使用
return{
money,
updateMoney,
car,
updateCar,
stu,
updateStu
}
}
}
fragment组件
在vue3的模板中，不再需要根标签，它内部有一个fragment的组件作为模板的根标签
vue3中同类型的数据和方法放一起了
let 把数据和方法都变成了变量
