Vue-(7)

内容概览

• vue3介绍
• 创建vue3项目的两种方式
• setup函数
• ref与reactive
• 计算属性和监听属性
• 生命周期
• hooks
• toRefs

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"""   
	跟之前一样
"""vite：创建vue3"""
	# 创建最新版本
		npm init vue@latest
	    # Pinai,Vue 的存储库，它可以跨组件/页面共享状态(与vuex功能类似)
	# 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>
  <!--vue3中不用在写在template中的一个标签下了-->
  <h2>{{ name }}</h2>
  <h2>{{ age }}</h2>
  <button @click="handleClick">点击弹窗</button>
  <button @click="handleAdd">点击age+1</button>
  <!--通过自定义属性给子组件传值-->
  <children aaa="aaa"></children>
</template>


<script>
import Children from "./components/Children.vue";

export default {
  name: 'App',
  components: {Children},
  setup() {
    /*以后所有的变量定义函数编写,都写在这个函数中
    * 如果直接这么写变量血染没有问题,但是没有响应式,变量改变了页面不会变*/
    let name = 'xxx'
    let age = 20

    // 定义函数
    function handleClick() {
      alert('---')
    }

    let handleAdd = () => {
      age++
      console.log(age)  // 打印的一直在增加,但是显示的不会改变
    }
    // 必须要返回给外界
    return {name, age, handleClick, handleAdd}
  }
}
</script>

Children组件：

<template>
  <h1>Children</h1>
</template>

<script>
export default {
  name: "Children",
  props: ['aaa'],
  setup(context) {
    // setup中没有this了,通过第一个参数(上下文)获取
    console.log(context)  // Proxy {aaa: 'AAA'}
  }

}
</script>

ref与reactive

# 导入使用: import {ref, reactive} from 'vue'
# 基本数据类型(数字,字符串,布尔)如果要加响应式,使用ref包裹;模板中直接使用,js中通过对象.value获取
# 对象/数组如果要加响应式,使用reactive
# ref也可以包裹对象

<template>
  <h2>{{ age }}</h2>
  <h2>{{ hobby }}</h2>
  <button @click="handleAdd">点击age+1</button>
  <button @click="handleDef">点击删除爱好</button>
</template>


<script>
import {ref, reactive} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    // let age = 20
    // let hobby = ['读书', '跑步', '篮球']
    let age = ref(20)
    let hobby = reactive(['读书', '跑步', '篮球'])
    console.log(age)  // age已经不是数字了,是RefImpl的对象

    let handleAdd = () => {
      age.value++
      console.log(age.value)
    }

    function handleDef() {
      hobby.pop()
      console.log(hobby)
    }

    return {age, hobby, handleAdd, handleDef}
  }
}
</script>

计算属性与监听属性

计算属性

<template>
  <input type="text" v-model="surname">
  <br>
  <input type="text" v-model="name">
  <hr>
  <input type="text" v-model="fullName">
</template>

1. 计算属性案例一
<script>
import {ref, computed} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    let surname = ref('')
    let name = ref('')
    let fullName = computed(() => {
      return surname.value + name.value  // 返回两个变量相加的值
    })
    return {surname, name, fullName}
  }
}
</script>

2. 计算属性案例二
<script>
import {reactive, computed} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    // 计算属性案例二
    let person = reactive({
      surname: '',
      name: ''
    })
    let fullName = computed(() => {
      return person.surname + person.name
    })
    return {person, fullName}
  }
}
</script>

3. 定义计算属性
<script>
import {reactive, computed} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    // 计算属性案例二
    let person = reactive({
      surname: '',
      name: ''
    })
    let fullName = computed({
      get() {
        return person.surname + '_' + person.name
      },
      set(value) {  // 当计算属性被修改时触发
        console.log(value)  // value值为修改后的值
        let nameList = value.split('_')
        person.surname = nameList[0]
        person.name = nameList[1]
      }
    })
    return {person, fullName}

  }
}
</script>

监听属性

<template>
  <input type="text" v-model="surname">
  <input type="text" v-model="name">
</template>


<script>
import {ref, watch, watchEffect} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    // 监听属性
    let surname = ref('')
    let name = ref('')  // 如果没有使用ref不能够被监听

    watch(name,(newValue, oldValue)=>{  // 可以接收两个参数
      console.log('name 改变了')
      console.log(newValue);  // 第一个参数是改变后的值
      console.log(oldValue);  // 第二个参数是改变前的值
    })

    // vue3 多的watchEffect,只要函数中使用的变量发生变化，它就会触发
    watchEffect(()=>{
      // 只要该函数中使用的变量发生变化,就会触发
      console.log(surname.value)
      console.log(name.value)
      console.log('watchEffect配置的回调执行了')
    })
    return {surname, name}

  }
}
</script>

生命周期

# 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中的逻辑更清楚易懂

获取鼠标点击坐标案例

• hooks/usePoint.js

import {onMounted, onUnmounted, reactive} from 'vue'

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

    function getPoint(event) {
        console.log(event)  // 在event中获取点击坐标
        p.x = event.pageX
        p.y = event.pageY
    }

    // 生命周期钩子的onMounted,当页面挂载完成后执行
    onMounted(() => {
        // 给鼠标点击增加监听,当点击鼠标,就会执行函数
        window.addEventListener('click', getPoint)
    })
    // 当组件被销毁时,把功能去除
    onUnmounted(() => {
        window.removeEventListener('click', getPoint)
    })
    return p
}

• 在想要使用的组件中引入使用即可

<template>
  <span>x:{{ p.x }};y:{{ p.y }}</span>
</template>


<script>
import UsePoint from "./hooks/usePoint.js";

export default {
  name: 'App',
  components: {},
  setup() {
    let p = UsePoint()

    return {p}

  }
}
</script>

toRefs

# ...{xxx:yyy}对应python的**{'xxx':'yyy'}
# setup函数,return{...toRefs(data)}可以解压赋值

<template>
  <input type="text" v-model="name">
  <br>
  <input type="text" v-model="age">
  <br>
  <input type="text" v-model="gender">
</template>


<script>

import {reactive, toRefs, watchEffect} from "vue";

export default {
  name: 'App',
  components: {},
  setup() {
    let data = reactive({
      name: 'xxx',
      age: 20,
      gender: '男'
    })
    watchEffect(() => {
      console.log(data.name)
      console.log(data.age)
      console.log(data.gender)
    })

    return {...toRefs(data)}  // 等同于{name:'xxx', age:20, gender:'男'},并且做了响应式

  }
}
</script>

后台管理模板

# 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