【2022-11-02】前端Vue框架(七)

一、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 的修饰符

5 组合式API和配置项API
	-使用组合式API
    -配置项API
    	-{
            name:'xx',
            data:function(){},
            methods:{}
        }

​

二、创建Vue3项目

# vue-cli:创建vue2和vue3   
	-create Vue 项目名称
# vite：创建vue3，创建最新
	npm init vue@latest
    # Pinai
# vite创建另一种方式：创建vue3.0.4版本
    npm init vite-app <project-name>
    ## 进入工程目录
    cd <project-name>
    ## 安装依赖
    npm install
    ## 运行
    npm run dev
    
# 启动的两种方式


# 以后再页面中的this，已经不是vue2中的vc对象了，是一个代理对象

三、setup函数

# vue 新增的setup配置项函数，
	-在里面可以定义变量
    -定义函数
    -必须return 变量和函数，在模板中才能使用

<template>
  <h2>{{ name }}</h2>
  <h3>{{ age }}</h3>
  <button @click="handleClick">点我看美女</button>
  <br>
  <button @click="handleAdd">点我，age+1</button>
</template>

<script>


export default {
  name: 'App',
  setup() {   // setup中没有this了
    // 以后所有的变量定义函数编写，都写在这个函数中
    // 定义变量 如果这么写，变量渲染没问题，但是没有响应式，页面变了，变量不会变
    let age = 19
    let name = 'jason'
    // 定义函数
    function handleClick() {
      alert('美女~~~')
    }
    let handleAdd = () => {
      console.log('我要开始加了')
      age=age+1
      console.log(age)
    }
    // 函数必须有返回值
    return {
      age, name, handleClick, handleAdd
    }

  }
}
</script>

四、ref和reactive

#  导入使用：import {ref, reactive} from 'vue'
#  基本数据类型（数字，字符串，布尔）如果要加响应式：使用ref包裹，在模板中之间使用，js中通过对象.value取值
#  对象，数组引用使用reactive,ref可以包对象类型，但是用的时候必须.value

<template>
  <h2>{{ name }}</h2>
  <h3>{{ age }}</h3>
  <br>
  <button @click="handleAdd">点我，age+1</button>
  <br>
  <button @click="handleChangeName">点我name变化</button>
</template>
<script>

import {ref, reactive} from 'vue'

export default {
  name: 'App',
  setup() {
    let age = ref(19) // age 已经不是数字了，是RefImpl的对象
    let name = ref('tony')
    let handleAdd = () => {
      console.log('我要开始加了,age是', age)
      age.value = age.value + 1
      console.log('我要开始加了,age是', age.value)
    }
    function handleChangeName(){
      name.value=name.value+'?'
      console.log(name)
    }

    return {
      age, name, handleClick, handleAdd,handleChangeName
    }

  }
}
</script>

五、计算和监听属性

#  计算属性

export default {
  name: 'App',
  // computed:{
  //   fullName:function (){}
  // },
  setup() {
    // 1 计算属性案例1
    // let firstName = ref('钟')
    // let lastName = ref('子期')
    // // 定义计算属性
    // let fullName = computed(() => {
    //   return firstName.value + lastName.value
    // })

    // 2 计算属性案例2
    let person = reactive({
      firstName: '钟',
      lastName: '子期',
    })
    // 定义计算属性
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(value) {
        console.log(value)
        const nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]

      }
    })
    return {
      person
    }


  }
}




# 监听属性


import {computed, watch, ref, reactive, watchEffect} from 'vue'

export default {
  name: 'App',
  setup() {
    // 1 计算属性案例1
    let name = ref('tony')

    // 定义监听属性
    watch(name, (newValue, old) => {
      console.log('name变了')
      // console.log(old)
      // console.log(newValue)
    })
    // vue3 多的watchEffect,只要函数中使用的变量发生变化，它就会触发
    watchEffect(() => {
      // 只要该函数中使用的变量发生变化，它就会触发
      // let a = name.value + '?'
      console.log('watchEffect配置的回调执行了')
    })
    return {
      name
    }


  }
}

六、生命周期

# Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
        beforeDestroy改名为 beforeUnmount
        destroyed改名为 unmounted
# Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
        beforeCreate===>setup()
        created=======>setup()
        beforeMount ===>onBeforeMount
        mounted=======>onMounted
        beforeUpdate===>onBeforeUpdate
        updated =======>onUpdated
        beforeUnmount ==>onBeforeUnmount
        unmounted =====>onUnmounted

七、hooks

# 什么是hook？—— 
本质是一个函数，把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂

import {onMounted, onUnmounted, reactive} from "vue";

export default function () {
    let p = reactive({
        x: 0,
        y: 0
    })

    function getPoint(event) {
        console.log(event)
        p.x = event.pageX
        p.y = event.pageY
    }

    // 声明周期钩子的onMounted，当页面挂载就会执行
    onMounted(() => {
        // 给数鼠标点击增加监听，当点击鼠标，就会执行这个函数
        window.addEventListener('click', getPoint)
    })
    // 组件被销毁时，把功能去掉
    onUnmounted(() => {
        window.removeEventListener('click', getPoint)
    })

    return p
}

<template>
  <h2>x坐标是：{{ p.x }},y坐标是:{{ p.y }}</h2>
</template>

<script>
import {reactive, onMounted, onUnmounted} from 'vue'
import usePoint from '../hook/uesPoint.js'

export default {
  name: "Point",
  setup() {
    let p = usePoint()
    return {p}
  }
}

</script>

<style scoped>

</style>

八、ToRefs

# setup函数，return {...toRefs(data)}可以解压复制

export default {
  name: 'App',

  setup() {
    let data = reactive({
      name: 'kevin',
      age: 19,
      isShow: true
    })

    function handleShow() {
      console.log('hhhh')
      data.isShow = !data.isShow
      data.age++
    }

    return {
      ...toRefs(data),
      handleShow
      // data
    }

  }
}

九、后台管理模板

# vue-admin-template-master
	-跑起来
	-package.json 第7行加入
    "dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",

    
    
# java版的若依，带权限控制的后台管理模块
# python ：django-vue-admin   
# python flask-vue-admin
# go:gin-vue-admin