vue学习笔记

今日内容概要

• 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
    -setup() {
        let name = 'xx'
        function handleClick() {
            alert('美女~~~')
         }
        return {
            name, handleClick
        }
    }
    -配置项API
    -{
         name:'xx',
         data:function(){},
         methods:{}
      }

创建vue3项目的方式

# vue-cli:创建vue2和vue3
    vue create 项目名

# vite：创建vue3，创建最新
    npm init vue@latest

# vite创建另一种方式：创建vue3.0.4版本
    npm init vite-app <project-name>
    ## 进入工程目录
    cd <project-name>
    ## 安装依赖
    npm install
    ## 运行
    npm run dev

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

setup函数

vue3新增的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 = 'lqz'
    // 定义函数
    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>{{ person.name }}</h2>
  <h2>{{ person.age }}</h2>
  <h3>{{ age }}</h3>
  <button @click="handleClick">点我name变化</button>
  <br>
  <button @click="handleAdd">点我，age+1</button>
</template>

<script>
import {ref, reactive} from 'vue'

export default {
  name: 'App',
  setup() {
    let person = reactive({
      name: 'wjl',
      age: '18',
    })
    let age = ref(19)

    // 定义函数
    function handleClick() {
      person.name = person.name + '?'
      console.log(person.name)
    }

    let handleAdd = () => {
      console.log('我要开始加了')
      age.value = age.value + 1
      console.log(age)
    }
    // 函数必须有返回值
    return {
      age, person, handleClick, handleAdd
    }
  }
}
</script>

计算和监听属性

计算属性代码演示：

<template>
  <h1>setup函数的参数</h1>
  <h3>案例一</h3>
  <input type="text" v-model="firstName">
  <br>
  <input type="text" v-model="lastName">
  <br>
  <input type="text" v-model="fullName">

  <h3>案例二</h3>
  <input type="text" v-model="person.firstName">
  <br>
  <input type="text" v-model="person.lastName">
  <br>
  <input type="text" v-model="person.fullName">
</template>

<script>
// 计算属性，监听属性
import {computed, ref, reactive} from 'vue'

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

    // 2 计算属性案例2
    let person = reactive({
      firstName: 'w',
      lastName: 'jl',
    })
    // 定义计算属性
    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 {
      firstName, lastName, fullName, person
    }
  }
}
</script>

监听属性代码演示：

<template>
  <h1>监听属性</h1>
  <hr>
  <input type="text" v-model="name">--->{{ name }}
</template>

<script>
// 监听属性
import {watch, ref, reactive, watchEffect} from 'vue'

export default {
  name: 'App',
  setup() {
    let name = ref('wjl')
    // 定义监听属性
    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
    }
  }
}
</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

App.vue

<template>
  <h1>生命周期</h1>
  <hr>
  <button @click="handleClick">点我消失</button>
  <HelloWorld v-if="show"></HelloWorld>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import {ref} from 'vue'

export default {
  name: 'App',
  components: {HelloWorld},
  setup() {
    let show = ref(true)
    function handleClick() {
      show.value = !show.value
    }
    return {
      show, handleClick
    }
  }
}
</script>

HelloWorld.vue

<template>
  <h1>我是helloworld组件</h1>
</template>

<script>
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

export default {
  name: 'HelloWorld',
  setup(context) {
    console.log('组合式api的beforeCreate')
    console.log('组合式api的created')
    onBeforeMount(() => {
      console.log('组合式api的onBeforeMount')
    })
    onMounted(() => {
      console.log('组合式api的onMounted')
    })
    onBeforeUpdate(() => {
      console.log('组合式api的onBeforeUpdate')
    })
    onBeforeUnmount(() => {
      console.log('组合式api的onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('组合式api的onUnmounted')
    })
  }
}
</script>

hooks

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

hook/usePoint.js

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)}可以解压复制

<template>
  <h1>toRefs</h1>
  <h1>人名是：{{ name }},年龄：{{ age }}</h1>
  <button @click="handleShow">点我显示取消</button>
  <div v-if="isShow">
    我是div
  </div>
</template>

<script>
// toRefs
import {toRefs, reactive} from 'vue'

export default {
  name: 'App',

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

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

    return {
      ...toRefs(data),
      handleShow
    }
  }
}
// ...toRefs(data) 等同于：解压
</script>

后台管理模板

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

编程语言基于的二次开发后台管理软件：
java：java版的若依，带权限控制的后台管理模块
python：django-vue-admin
go：gin-vue-admin