vue框架08 vue3

vue3的介绍

# vue项目的版本，新项目使用vue3，部分老项目使用vue2

# vue3的变化
    1.性能的提升
       - 打包大小减少41%
       - 初次渲染快55%，更新渲染块133%
       - 内存减少54%
    2.源码的升级
       - 使用Proxy代替defineProperty
       - 重写虚拟DOM的实现和Tree-Shaking
    3.倚靠TypeScript
       - Vue3可以更好的支持TypeScript
    4.新的特性
       - Composition API(组合API)
       - setup配置
       - ref与reactive
       - watch与watchEffect
       - provide与inject
    5.新的内置组件
       - Fragment
       - Teleport
       - Suspense
    6.其他改变
       - 新的生命周期钩子
       - data 选项应始终被声明为一个函数
       - 移除keyCode支持作为v-on的修饰符

# 组合式API和配置项API
    vue2：配置项API
         new Vue({
             el:'#app',
             data:{}
         })
    vue3:  组合式API
         let name='tom'
         let add=()=>{}
      

vue3创建项目

# 2.1 使用vue-cli
  - 创建的过程和vue2一样，只是在选在版本的时候选择vue3
  - 创建完成，使用pycharm打开，并且运行

# 2.2 vite
  - 新建的前端构建工具，最大的优势就是速度快
      https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
  - 使用步骤：
      1.安装：
                  npm init vue@latest
      2.按需选择vueRouter
      3.cd到项目中执行
                  cnpm install
      4.运行：
                  npm run dev
      """
      vueRouter:跟之前一样
      Pinia：用来替换Vuex的，新一代的状态管理器
      链式调用(抽时间)
      """
   - 速度快的原因：
      1.创建项目快：
             不用安装第三方依赖
      2.执行快的原因：
             热更新，按需编译  

setup函数

# vue2创建vue实例和vue3创建vue实例的区别
  - 1. vue2创建vue实例：
        new Vew()  ---->是Vue的实例，里面有$store,$refs...
        createApp(App)  ---->是个对象，对象里有东西，没有$store,$refs...,以后有用都是导入使用
  - 2. vue3创建vue实例：
        以后vue3 的<template>，不需要写一个标签了。
        以后都写在setup函数中，定义变量，定义函数，一定要return，在templage中才能使用  
        失去了响应式     

ref和reactive

# 有响应式
   - 定义变量，有响应式就用 ref包裹起来，
   - 修改变量，需要用 变量名.value 修改

# 配置项api和组合式api可以混写(不建议)
   - 在前在data中定义的变量
   - 在setup中定义的变量
   - 总结：
        在setup中定义的变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可
        原来配置项中定义的变量，函数，在setup中无法使用

# 不同类型做响应式
    - ref通常用来包裹，数字，字符串类型，以后使用  xx.value
    - reactive用来包裹数组和对象类型    以后使用  直接用即可

# 总结
    - ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
    - reactive定义的数据：操作数据与读取数据：均不需要.value

# setup，ref和reactive 代码实操

<template>
  <div class="home">
    <h1>setup的使用</h1>
    <p>姓名：{{name}}</p>
    <p>年龄：{{age}}</p>
    <button @click="handleClick">点我看美女</button>
    <button @click="handleAdd">点击增加年龄</button>
    <button @click="handleName">点击名字加？</button>
    <button @click="handleName2">点击名字加？2</button>
    <br>
    {{userInfo.name}}
    {{userInfo.gender}}
    <br>
    <button @click="handleMessage">点击修改吴彦祖性别</button>
  </div>
</template>

<script>
import {ref,reactive} from 'vue'
export default {
  name: 'HomeView',
  methods:{
    handleName2(){
      this.name=this.name+'?'
      console.log(this.name)
    }
  },
  setup(){
    let name =ref('lqz')
    let age = ref(19)
    let handleClick =()=>{
      alert('猛男')
    }
    let handleAdd =()=>{
      age.value = age.value+1
      console.log(age) // 添加ref后打印出来直接是一个value对象
    }
    let handleName =()=>{
      name.value = name.value+'?'
      console.log(name) // 添加
    }
    // let userInfo = {
    //   name:'吴彦祖',
    //   gender:'male',
    // }
    // let userInfo =ref({
    //   name:'吴彦祖',
    //   gender:'male',
    // })
    let userInfo =reactive({
      name:'吴彦祖',
      gender:'male',
    })
    // let handleMessage =()=>{
    //   userInfo.value.gender = '未知'
    // }
    let handleMessage =()=>{
      userInfo.gender = '未知'
    }
    return {name,age,handleClick,handleAdd,handleName,userInfo,handleMessage}
  }
}
</script>

计算属性和监听属性

计算属性

# computed 的配置项中的写法，不建议用了
    computed:{
        fullName(){
          return this.firstName+this.lastName
        }
      },

 # vue3 新写法
    let person = reactive({
      firstName: '',
      lastName: '',
    })
   let fullName = computed(() => {
    return person.firstName + person.lastName
    })

# 计算属性取值和修改值
    let fullName = computed({
      get() {
        return person.firstName + person.lastName
      },
      set(value) {
        person.firstName = value.slice(0, 1)
        person.lastName = value.slice(1)
      },
    })

监听属性

# 组合式api写法，只要name发生变化，就会触发匿名函数执行
   let name = ref('lqz')
   watch(name, (newName, oldName) => {
      console.log('name变了')
      console.log('老的', oldName)
      console.log('新的', newName)
    })

# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行
    watchEffect(() => {
      console.log(age.value)
    })

生命周期

# vue3的变化，不推荐了
    -vue2       和    vue3比较
    beforeCreate===>beforeCreate
    created=======>created
    beforeMount ===>beforeMount
    mounted=======>mounted
    beforeUpdate===>beforeUpdate
    updated =======>updated
    beforeDestroy ==>beforeUnmount
    destroyed =====>unmounted

# 不推荐用这种写法了，配置项写法，统统写在setup中
    beforeCreate===>setup()
    created=======>setup()
    beforeMount ===>onBeforeMount
    mounted=======>onMounted
    beforeUpdate===>onBeforeUpdate
    updated =======>onUpdated
    beforeUnmount ==>onBeforeUnmount
    unmounted =====>onUnmounted

 # 以前写在created中的代码，现在直接写在setup开始即可
 let show = ref(false)
 axios.get().then(res=>{
      show.value=res.data.show
 })

toRefs

# 以后setup的返回值可以直接使用
  setup() {
    let data = reactive({
      name: 'lqz',
      age: 19,
      gender: '男'
    })
    return {...toRefs(data)}
  }
# 以后在模板中直接用  {{name}}

script setup的作用和lang=ts

<script setup>
import {ref} from 'vue'
let name = ref('lqz')
let handleClick = () => {
  alert('美女')
}
</script>

# 以后 这个script中的代码直接放到 setup函数中，不用return了

#lang=ts
里面代码使用ts写，而ts完全兼容js，继续写js代码没问题

# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发
​
# django-vue-admin 前端---》D2Admin
# 若依：vue前端  用来   vue-element-admin
# elamin前端   drf  写了基于rbac权限管理的框架
​
# https://gitee.com/liuqingzheng/vue_admin

vue后台管理模板