前端小白学习Vue3框架（一）

一. 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>