一. Vue3是什么？
Vue 3是Vue.js的最新版本，相对于Vue 2，Vue 3在性能、开发体验和组件化等方面有了显著提升。在性能方面，Vue 3进行了大量优化，包括虚拟DOM、Diff算法和Reactive API等
二.区别vue2以及vue3响应式原理
<!-- vue@2 响应式原理 只能针对对象观察变化 -->
<script>
let data={}
// 如果在此定义了message,不能通过this去使用，否则会出现死循环
// 定义变量 （储存器变量）
let _message = ''
// 在vue2里面放的是属性
Object.defineProperty(data,'message',{
set(value){
console.log('1.0观察数据修改了');
_message=value
// 也可以写成这种情况
this._message=value
// 不能这样写,会死循环
// this.message=value
},
get(){
console.log('2.0观察数据读取了');
return this._message
}
})
// 在vue@3中放置的是对象
let obj={}
let pobj=new Proxy(obj,{
set(target,key,value){
console.log('1.0观察修改');
if(key == 'color'){
return false
}
target[key]=value
},
get(target,key){
console.log('2.0观察读取');
return target[key];
}
})
// 修改的是响应式对象
pobj.color='#ff5500'
pobj.width=1000
pobj.height=500
console.log(pobj);
console.log(obj);
三.学习vue3知识点
1.先创建一个vue3项目来学习吧！
跟先前学习vue2一样也是通过vue-cli创建vue3项目，通过vue ui 或者vue create 项目名创建
只不过在功能上选择时要有所不同咯！
babel ts router css linter 功能
less linter 设置公共路径 ./
在vscode代码编辑器里下载vue3插件（也要把vue2的禁用噢）
2.vue3语法的写法种类
写法1：setup 作初始化，通过export default以及ref来创建响应式数据的方法，需要retrun 数据才能在template（组合式+选项式）
中使用该响应式数据
写法2：写成vue2的语法形式，引入组件 ，通过data,reutrn 数据属性（选项式）
写法3（推荐）：引入ref创建响应式数据，通过setup做初始化，直接通过ref创建响应式数据，通过value修改（组合式）
<template>
<div>
<div class="home">
<h2>首页</h2>
<!-- <img alt="Vue logo" src="../assets/logo.png"> -->
<h3>{{message}}</h3>
</div>
</div>
</template>
<!-- 写法1 -->
<script lang="ts">
import { defineComponent ,ref} from 'vue';
// ref 创建响应式数据的方法
export default defineComponent({
// setup表示初始化
setup(){
let message=ref('hello world')
// 返回相应式数据
return {
message
}
}
})
</script>
<!-- 写法2 选项式加组合式-->
<script lang="ts">
// 导入defineComponent函数
import { defineComponent } from 'vue';
//定义组件
export default defineComponent({
name: 'HomeView',
data(){
return {
message:'hello Vue'
}
}
});
</script>
<!-- 写法3 setup写在script里面 -->
<!-- 组合式 -->
<script lang="ts" setup>
import { ref} from 'vue';
// ref 创建响应式数据的方法
let message=ref('hello today')
// message 是一个相应式对象
console.log(message);
// 修改赋值通过value修改
message.value='你好啊兄弟'
</script>
3.侦听器、属性计算、过滤器
在vue3中，需要用到什么就把需要用到的功能引入进来
// 导入api,创建响应式数据的方法 import {ref,watch, computed} from "vue" // 定义数据,此处写法无响应式 // let user_name='aaa' // 定义数据写变量 // 这样的是有响应的，要通过ref去创建响应式数据 let user_name =ref("admin")
属性侦听
//侦听器
//1.引入侦听器
import {ref,watch} from "vue"
//2创建响应式数据
let user_name =ref("admin")
//3.侦听改变
watch(user_name,(n,o)=>{
console.log(n,o)
},{
deep:true,//深度侦听
immediate:true,//立即侦听
}
)属性计算
<template>
<div>
<input v-model="fisrt_name" type="text" placeholder="姓">+
<input v-model="last_name" type="text" placeholder="名">=
<span>{{ full_name }}</span>
</div>
</template>
<script lang="ts" setup>
//引入
import {ref,computed} from 'vue'
//通过ref创建响应式数据
let first_name=ref("");
let last_name=ref("大锤");
//通过value获取值
let full_name=computed()=>{
return first_name.value+last_name.value
}
</script>过滤器
//在vue3中没有过滤器，改用工具函数代替
<template>
<div>
<p>{{ datetime }}</p>
<p>{{ formatime(datetime) }}</p>
</div>
</template>
<script>
import {ref} from "vue"
let date=new Date()
let datetime=ref("")
datetime.value=date.toString()
//vue3中没有过滤器，使用工具函数
const formatime=(datetimestr:string)=>{
let dt=new Date(datetimerstr);
return dt.toLocaleDateString()+ " " +(dt.toLocaleTimeString())
}
</script>
4.生命周期及钩子函数
-->创建阶段beforeCreate created ---->挂载阶段 beforeMount mounted --->更新阶段 beforeupdate updated -->销毁阶段 beforeUnmount unmounted（改变）
//在挂载阶段操作dom做canvas
<template>
<div>
<p>绘画</p>
<p>{{ res }}</p>
<div>
<canvas ref="pcanvas"></canvas>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref,onMounted} from 'vue'
const pcanvas=ref()
onMounted(()=>{
const canvas=pcanvas.value
if(canvas){
canvas.width=600;
canvas.height=800;
const pen=canvas.getContext("2d")
pen.beginPath();
pen.fillStyle="red"
pen.fillRect(0,0,600,100)
}
})
</script>
