一、Vue-Cli
vue3使用环境：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 是一个 web 开发构建工具，由于其原生 ES ?？榈既敕绞?，可以实现闪电般的冷服务器启动。使用 Vite 可以快速构建 Vue 项目。
Vite 需要 Node.js版本 12.0以上。
# 安装Vite
npm init vite@latest
# 安装依赖
npm install
# 运行
npm run dev
三、计算属性
在Vue3中，定义计算属性，需要引入computed组合式API。computed()函数的参数是一个回调函数，回调函数的返回值，就是计算属性的返回值。
<div class="child">
<h2>计算属性</h2>
<div>姓：<input v-model="firstName" /></div>
<div>名：<input v-model="lastName" /></div>
<div>姓名：<input v-model="fullName" /></div>
<hr />
<ul>
<li v-for="item in goodses" :key="item.id">
{{ item.name }}--{{ item.price }}
</li>
<li>总价：{{ totalPrice }}</li>
</ul>
</div>
//导入组合式api
import { ref, reactive, computed } from "vue";
export default {
name: "Child",
//vue3中全新的编程方式：组合式api
setup() {
// 定义姓和名
let firstName = ref("张")
let lastName = ref("三")
// 定义读写计算属性返回姓名
let fullName = computed({
// get方法返回值
get:()=>{
return firstName.value+'.'+lastName.value
},
// set方法设置值
set:(val)=>{
let arr = val.split('.')
firstName.value = arr[0]
lastName.value = arr[1]
}
})
//定义商品数组
let goodses = reactive([
{
id: 1,
name: "苹果",
price: 5,
},
{
id: 2,
name: "葡萄",
price: 8,
},
{
id: 3,
name: "香蕉",
price: 10,
},
]);
//定义只读的计算属性，返回商品的总价
let totalPrice = computed(()=>{
return goodses.map(r=>r.price).reduce((a,b)=>a+b,0)
})
return {
firstName,
lastName,
fullName,
goodses,
totalPrice
};
},
//vue3中依然可以使用vue2中的编码方式。
/* data() {
return {
firstName: "张",
lastName: "三",
goodses: [
{
id: 1,
name: "苹果",
price: 5,
},
{
id: 2,
name: "葡萄",
price: 8,
},
{
id: 3,
name: "香蕉",
price: 10,
},
],
};
},
methods: {},
computed: {
// 计算属性，在定义的时候是函数，使用的时候是属性。
fullName: {
// get方法返回值
get() {
console.log("fullName方法执行了");
return this.firstName + "." + this.lastName;
},
// set 方法设置值
set(val) {
let arr = val.split(".");
this.firstName = arr[0];
this.lastName = arr[1];
},
},
totalPrice() {
console.log("totalPrice方法执行了");
return this.goodses.map((r) => r.price).reduce((a, b) => a + b, 0);
},
}, */
};
四、侦听器
在Vue3中，定义侦听器，需要引入watch组合式API。
watch函数有三个参数：① 侦听谁，② 回调函数，③ 配置对象(可以省略)。如果监听的是一个对象/对象里的某个属性，第一个参数就是一个函数，由该函数返回指定对象中监视的属性。
注意：watch监视对象，默认开始深度监视，并且无法关闭。所以直接监视整个对象不好。vue3建议我们，监视对象时，指定监视对象的属性。如果监视的对象属性也是一个对象，默认不开启深度监视，需要手动开启。
watchEffect()监视器：只有一个回调函数参数，并且没有参数。特点：① 该回调函数一开始会执行一次；② 不需要明确的去监视谁，回调函数里面用到了谁，谁变了，就会重新执行回调函数。
<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监听器，只有一个回调函数参数，并且没有参数
watchEffect(()=>{
console.log('我是watchEffect');
let m = money.value
let name = stu.name
})
return{
money,
stu
}
}
};
五、过滤器
在Vue2中可以定义过滤器，但是在Vue3中已经取消了过滤器。Vue3推荐我们使用方法 或 计算属性的方式，实现之前过滤器的效果。
<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)
}
}
};
六、fragment组件
在vue3的模板中，不再需要根标签，它内部有一个fragment的组件作为模板的根标签。
