vue3与vue2的区别

一、vue3

        1.vue是国内最火的前端框架现在已经更新到vue3版本

        2.vue3官方地址： Vue.js - The Progressive JavaScript Framework | Vue.js

           vue3中文文档：Vue.js - 渐进式 JavaScript 框架 | Vue.js

        3.vue3性能更高，体积更小

        vue3支持ui组件库：

• element-plus(PC组件库)
• vant   
• ant-design-vue(PC组件库)            

vue3设计理念 Vue组合式API（typeScript支持）

 vue3新特性：          

数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)

解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能 ---覆写

(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持

虚拟DOM - 新算法 (更快 更小)

提供了composition api, 可以更好的逻辑复用

模板可以有多个根元素

源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)

... 废弃了 eventbus 过滤器...

二、Vite的使用

Vite官方文档：Vite | 下一代的前端工具链

优势：

• 使用原生ESM文件，无需打包
• 轻量快速的热重载，始终极快的模块热重载（HMR）
• 丰富的功能，支持TypeScript、JSX、CSS                        

 三、Vite的基本使用

目标：如何使用vite创建一个vue3的项目

（1）使用vite创项目

  # npm create vite

  #

  yarn  create vite

 vite安装

npm create vite
vite init 项目名称

 

 vite项目的运行

package.json的scripts

cd 项目目录
npm i 安装
npm run dev 

四、vue3 vscode 插件

1. live Server (启动本地服务器)
2. volar(vue的插件包)
3. github Gopilot(帮写代码)

      4.1vue3项目目录结构

           setup

        执行时间是=created+beforeCreate生命周期 响应式数据需要导入ref

 

<template>
  <button @click="num++">{{num}}</button>
</template>
<script>
import {ref} from 'vue'

setup(){
  const num = ref(0);
  return {num}
}
</script>

setup 语法糖

1. 组件不需要注册导入就可以用
2. 数据不需要返回

<script setup>

ref&reactive

• ref 定义值类型的响应式数据
• reactive 定义一个引用类型的响应式数据

import {ref,reactive} from 'vue'
const num = ref(0);
const list = reactive([1,2,3])

 ref定义的数据再script标签中访问设置要加value

function addNum(v=1){
  num.value+=v;
}

setup的方法

• 可以像原生js定义方法,直接使用

computed watch watchEffect

• computed 计算
• watch 监听
• watchEffect 监听副作用

计算computed语法1 回调函数

const doubleNum = computed(()=>num.value*2);

计算computed语法2 get,set方式

const fee = computed({
  // 获取feed值的时候执行get方法
  get(){
    return num.value*2;
  },
  // 设置feed值的时候执行set方法
  set(v){
    num.value = v/2;
  }
})

watch监听数据的变化，返回的函数可以停止监听，num 被监听的数据，newVal num最新的值,oldVal 之前的值，deep 深度监听

var stop = watch(num,(newVal,oldVal)=>{
  // console.log(newVal,oldVal);
  localStorage.setItem("num",newVal);
},{deep:true,immediate:true})

watchEffect 监听副作用
被其引用的数据都会被监听,数据变化会执行回调函数

// 使用watchEffect 监听msg和num的变化
watchEffect(()=>{
  // 在回调函数中引用的数据都会被监听
  console.log(msg.value,num.value);
})

vue3生命周期

没有created,beforeCreate setup本身就是
onMounted:组件挂载完毕的回调函数*
onBeforeMount:组件挂载之前的回调函数
onUpdated:组件更新完毕的回调函数
onBeforeUpdate:组件更新之前的回调函数
onUnmounted:组件卸载完毕的回调函数
onBeforeUnmount:组件卸载之前的回调函数*
挂载完毕:dom操作,ajax请求,定时器,注册事件
卸载之前:清除定时器,清除事件监听

onMounted(()=>{  
  console.log("组件挂载完毕")
  console.log(head.value.innerHTML);
})

1. watch 监听怎么监听多个ref数据,怎么监听 reactive数据 ,怎么监听reactive数据的某个属性

 

watch([v1,v2],function(nval,oval){
  // 监听多个ref
})
watch(state,function(nval){
  // 监听reactive
})
watch(()=>state.info,function(nval){
  // 如果info是一个对象
},{deep:true})

组件传参

父传子 props 子传父 事件 跨层级 Provider inject 全局状态管理 pinia (大菠萝)

1. defineProps定义父组件传入props参数并接收参数      

defineProps(["modelValue","step"])
const props = defineProps({
  "modelValue":{type:Number,default:1}
})

 template 可以直接访问props中的属性

 <div>{{props.modelValue}}</div>

<div>{{modelValue}}</div>

 在script中访问(只读)

props.modelValue

2.defineEmits定义事件发送器,向父组件传递参数 定义事件发送器

const emits = defineEmits(["change","update:modelValue"])

发送事件

emits("update:modelValue",10)

 父组件监听

<CounterCom @update:modelValue="size=$event"></CounterCom>
<!-- $event 是子组件传入的参数 10 -->

 3. v-model

v-model语法简写 v-model="size" 等于 :modelValue="size" @update:modelValue="size=$event"

<ModalCom v-model:visible="visible"/>
<MoaalCom :visible="visible" @update:visible="visible=$event"/>

4.defineExpose

定义父组件可以访问子组件的哪些方法和属性

vite 支持 sass和less

sass

npm i sass sass-loader -D

<style lang="scss">

 less

npm i less less-loader -D
<style lang="less">

跨层级传参

1. provide
2. inject

        子组件和子孙组件都可以收到父组件传入参数 父组件提供数据        

provide('width',width)

子组件获取数据

const width = inject('width')

provide 和inject 必须导入

 

import {provide,inject} from 'vue'

vue3的启动

vue3

createApp(App).use(router).use(createPinia()).mount("#app")

 vue2

new Vue({
    store,
    rouer,
    render:h=>h(App)   
}).$mount("#app")

 

vue3的全局方法定义

app.config.globalProperties.$intro = ()=>{}

 vue2 全局方法

Vue.prototype.$intro= ()=>{}

vue3的Pinia

Vue3的全局状态管理器 异步 响应式更新视图

创建仓库

//stores/useCounter.js
export const useCounter= defineStore("counter",()=>{
    // 定义数据
    const num = ref(10);
    // 定义修改数据的方法Action
    const increment = ()=>num.value++;
    // 返回
    return {num,increment}
})

使用仓库

// views/HomeView.vue
import {useCounter} from '../stores/useCounter.js'
const store = useCounter();

<button @click="store.increment()">{{store.num}}</button>

getter 计算

const doubleNum = computed(()=>num.value*2);
return{num,doubleNum}

{{store.doubleNum}}

修改仓库数据的方法

01 直接修改

store.num++;

02 通过方法修改

<button @click="store.increment()">

03 通过$patch

store.$patch({num:50})

监听 动作(方法)

store.$onAction(obj=>{
    console.log("动作被执行",obj)
})

监听状态

store.$onSubscribe(obj=>{
    console.log("状态被修改",obj)
})