Vue框架：9，Vue3的用法，setup函数，ref和reactive，计算属性和监听属性，生命周期，toRefs，script setup的作用和lang，Vue后台管理模板

目录

• 前端开发之Vue框架
• 一、Vue3
  • 1、Vue3创建项目
  • 2、setup函数
  • 3、ref和reactive
  • 4、计算属性和监听属性
  • 5、生命周期
  • 6、toRefs
  • 7、script setup的作用和lang
  • 8、Vue后台管理模板

前端开发之Vue框架

一、Vue3

简介：

是最新发布的版本，相比于Vue2改变了部分语法，很多新项目都使用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
    -新的内置组件
    -Fragment
    -Teleport
    -Suspense
    -其他改变
# 须知部分
    -新的生命周期钩子
    -data 选项应始终被声明为一个函数
    -移除keyCode支持作为 v-on 的修饰符

	 -组合式API和配置项API
        # vue2 ：配置项API
        new Vue({
             el:'#app',
             data:{}
         })

        # vue3: 组合式API
        let name='lqz'
        let add=()=>{
        }

1、Vue3创建项目

使用vue-cli：

# 创建跟之前vue2 一样，只是选择vue版本的时候，选择vue3
	cmd终端：
		vue create vue3_project

# 创建完成，使用pycharm打开，并运行

使用vite：

一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

# 官网地址：
	https://vitejs.cn/

# 安装：（cmd窗口指令）
	-npm init vue@latest
	-按需选择，vueRouter
	-cd到项目中执行cnpm install 把依赖装好
	-运行：npm run dev

# 为什么速度快：
    -创建项目快----》不安装第三方依赖
    -执行项目，热更新----》按需编译

2、setup函数

在Vue2的组件中，需要将函数、变量等其它属性都要编写在对应的配置中，在升级到Vue3后就可以直接在export default 中编写函数变量等方法和属性，这样做的目的是可以使项目更简洁，明了

vue2和vue3创建vue实例的区别：

# vue2:
	- vue2的实例是在main.js中使用new Vue的形式创建
	- 实例中包含里面有$store,$refs...等方法

# vue3：
	-createApp(App)--->是个对象，对象里有东西，没有$store,$refs...，以后有用，都是导入使用
		const app = createApp(App)
       app.use(router)
       app.mount('#app') 

	- 写在setup中的属性和方法，一定要retrun出去才能使用
	- 失去了响应式（当变量发生改变时页面不会发生变化）

注意事项：

# vue3支持vue2的语法，这就意味着可以在vue3同时编写vue2和3的语法
    配置项api和组合式api可以混写，不建议
        -在data中定义的变量，可以在setup中使用
        -在setup中定义的变量，无法在data中使用

示例：

<script>
export default {
  setup() {
    let name = 'kangkang'
    let age = '18'
    let handleClick = () => {
      alert('美女')
    }
    return {name, age, handleClick}
  }
}
</script>
<template>
  <div class="about">
    <h1>setup的使用</h1>
    <button @click="handleClick">点我弹出美女</button>
    <p>
      <span>姓名：{{ name }}</span>
    </p>
    <p>
      <span>年龄：{{ age }}</span>
    </p>
  </div>
</template>

3、ref和reactive

ref和reactive是为变量提供了响应式，在使用的时候需要提前导入，将需要添加响应式的变量包裹

• ref:
  • 建议包裹字符串、数字类型
  • 也可以包裹数组和对象，但是不建议（取值不方便）
• reactive：
  • 包裹数组、对象类型

ref的使用：

如果不使用ref包裹，在触发函数后，页面上的数字并不会发生改变，但是其数值其实已经被修改了

• 被ref包裹后，可以在模板字符串中直接使用，但是在script标签中使用的时候需要用xxx.value

<template>
  <div class="about">
    <h1>setup的使用</h1>
    <button @click="handleClick">点我修改年龄</button>
    <p>
      <span>姓名：{{ name }}</span>
    </p>
    <p>
      <span>年龄：{{ age }}</span>
    </p>
  </div>
</template>
<script>
import {ref, reactive} from 'vue'

export default {

  setup() {
    let name = ref('kangkang')
    let age = ref('18')
    let handleClick = () => {
      console.log(age)
      age.value++
    }
    return {name, age, handleClick}
  }
}
</script>

reactive的使用：

用来包裹数组和对象，其实ref也可以包裹，但是取值的时候相对麻烦，需要先.value然后在点出对应的值，被reactive包裹的数组和对象可以直接点出需要用的值

<template>
  <div class="about">
    <h1>setup的使用</h1>
    <button @click="handleClick">点我修改年龄</button>
    <p>
      <span>姓名：{{ name }}</span>
    </p>
    <p>
      <span>年龄：{{ age }}</span>
    </p>
    <p>
      <span>爱好：{{ info.hobby }}----性别：{{ info.gender }}</span>
    </p>
    <p>
      <button @click="handleAge">点我修改性别</button>
    </p>
  </div>
</template>
<script>
import {ref, reactive} from 'vue'

export default {

  setup() {
    let name = ref('kangkang')
    let age = ref('18')
    let info = reactive({
      hobby: 'read',
      gender: 'male'
    })
    let handleClick = () => {
      age.value++
    }
    let handleAge = () => {
      console.log(info)
      info.gender = 'female'
    }
    return {name, age, handleClick, info, handleAge}
  }
}
</script>

4、计算属性和监听属性

计算属性：

getup出现，就意味着之前的配置发生了变化，下面直接使用代码进行演示

vue2写法

<script>
	// vue2
    export default {

        computed:{
            fullName(){
              return this.firstName+this.lastName
            }
      }
    }
</script>

vue3写法

<template>
  <div class="home">
    <h1>计算属性</h1>
    <p>
      姓：<input type="text" v-model="lastName">
    </p>
    <p>
      名：<input type="text" v-model="firstName">
    </p>
    <br>
    <span>完整姓名：{{ fullName }}</span>
  </div>
</template>

<script>

import {computed, ref} from "vue";

export default {
  name: 'HomeView',
  setup() {
    let lastName = ref('')
    let firstName = ref('')
    let fullName = computed(() => {
      return lastName.value + firstName.value
    })
    return {lastName, firstName, fullName}
  }
}
</script>

# 计算属性包含两个新的函数
	get： 内部的变量发生变化时触发
	set： 计算属性本生发生变化时候触发 （value参数是计算属性本身）

let fullName = computed({
     #
      get() {
        return lastName.value + firstName.value
      },
      set(value) {
        lastName.value = value.slice(0, 1)
        firstName.value = 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不变化，就不会执行
import {ref, reactive} from 'vue'
import {watch} from 'vue'

export default {
  name: 'App',
  setup() {
    const age = ref(19)
    const person = reactive({
      name: 'lqz',
      age: 20
    })
    //1 监听普通
    watch(age, (newValue, oldValue) => {
      console.log('sum变化了', newValue, oldValue)
    })
    // 2 监听对象
    watch(() => person.name, (newValue, oldValue) => {
      console.log('person.name变化了', newValue, oldValue)
    })
    // 3 监听多个
    const sum = ref(100)
    const msg = ref('很好')

    watch([sum, msg], (newValue, oldValue) => {
      console.log('sum或msg变化了', newValue, oldValue)
    })
    return {person, age, sum, msg}
  },
}
</script>

5、生命周期

vue2和vue3的区别：

描述	vue2	vue3
开始创建组件之前	beforeCreate	beforeCreate
开始创建组件之前	created	created
组件挂载到节点上之前执行的函数	beforeMount	beforeMount
组件挂载完成后执行的函数	mounted	mounted
组件更新之前执行的函数	beforeUpdate	beforeUpdate
组件更新完成之后执行的函数	updated	updated
组件卸载之前执行的函数	beforeDestroy	beforeUnmount
组件卸载完成后执行的函数	destroyed	unmounted

vue2           ------->      vue3

beforeCreate   -------->      setup(()=>{})
created        -------->      setup(()=>{})
beforeMount    -------->      onBeforeMount(()=>{})
mounted        -------->      onMounted(()=>{})
beforeUpdate   -------->      onBeforeUpdate(()=>{})
updated        -------->      onUpdated(()=>{})
beforeDestroy  -------->      onBeforeUnmount(()=>{})
destroyed      -------->      onUnmounted(()=>{})
activated      -------->      onActivated(()=>{})
deactivated    -------->      onDeactivated(()=>{})

# 总结： Vue2和Vue3钩子变化不大，删除了beforeCreate 、created  两个钩子使用setup()钩子来替代。

6、toRefs

在retrun时用来包裹对象，被包裹的对象在模板中可直接使用key值

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

7、script setup的作用和lang

• setup参数：
  • 直接在script中加入 setup参数就不需要在将方法和返回值写在export default中，并且不需要填写返回值，直接就可以使用
• lang属性：
  • lang=ts：里面代码使用ts写，而ts完全兼容js，继续写js代码没问题
  • lang=js：里面代码使用js写，不填默认js

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

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

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

8、Vue后台管理模板

# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发

# django-vue-admin 前端---》D2Admin
# 若依：vue前端  用来   vue-element-admin
# elamin前端   drf  写了基于rbac权限管理的框架

# https://gitee.com/liuqingzheng/vue_admin