vue3

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项目的两种方式

1.1vue-cli:创建vue2和vue3
-和vue2一样

2.vite:创建vue3，创建最新
npm init vue@latest

3.vite创建另一种方式:创建vue3.0.4版本
npm init vite-app <project-name>
-进入工程目录
cd <project-name>
-安装依赖
npm install
-运行
npm run dev
'vue3中的this不在是vue2中的vc对象，而是一个代理对象'

setup函数

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

2.例子
<template>
  <h1>{{ name }}</h1>
  <h2>{{ age }}</h2>
  <button @click="handleAdd">age增加1</button>
</template>

<script>
export default {
  name: 'App',
  setup() {
    // 所有的变量定义函数编写，都写在这个函数中
    let age = 18
    let name = 'barry'

    // 定义函数
    function handleAdd() {
      // vue3中没有响应式，页面变了，变量不会变
      age = age + 1
      console.log(age)
    }

    // 函数必须有返回值
    return {age, name, handleAdd}
  },
}
</script>

ref和reactive

<template>
  <h1>{{ person.name }}</h1>
  <h2>{{ age }}</h2>
  <button @click="handleAdd">age增加1</button>
  <br>
  <button @click="handleName">点我加?</button>
  <br>
  <!--  <button @click="handleClick">点我</button>-->
</template>

<script>
import {ref, reactive} from 'vue'
// 基本数据(数字、字符串、布尔)类型如果要加响应式:使用ref包裹
// 对象、数组使用reactive
export default {
  name: 'App',
  setup() {
    let age = ref(18)
    let person = reactive({name: 'barry'})

    function handleName() {
      person.name = person.name + '?'
      console.log(person.name)
    }

    let handleAdd = () => {
      age.value = age.value + 1
      console.log(age.value)
    }
    // 函数必须有返回值
    return {age, name, handleAdd, handleName, person}
  },
}
</script>

计算属性

<script>
import {computed, watch, ref} from 'vue'

export default {
  name: 'App',
  setup() {
    let firstName = ref('艾伦')
    let lastName = ref('barry')
    // 定义计算属性
    let fullName = computed({
      get() {
        return firstName.value + '-' + lastName.value
      },
      set(value) {
        const nameArr = value.split('-')
        firstName.value = nameArr[0]
        lastName.value = nameArr[1]
      }
    })
    return {firstName, lastName, fullName}
  },
}
</script>

监听属性

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

export default {
  name: 'App',
  setup() {
    let age = ref(18)
    let name = ref('barry')
    // 定义监听属性
    watch(name, () => {
      console.log('name值变了')
    })
    // vue3中多的watchEffect
    watchEffect(() => {
      // 只要函数中使用的变量发生变化，它就会触发
      let a = age.value + 1
      console.log('变量改变了')
    })
    return {age, name}
  },
}
</script>

生命周期

1.vue3中继续使用vue2中的生命周期钩子，但有两个更名了:
beforeDestroy改名为:beforeUnmount
destroyed改名为:unmounted

2.vue3也提供了Composition API形式的生命周期钩子，与vue2中的钩子对应关系:
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted

hooks

1.hooks本质上是一个函数，把setup函数中使用的Composition API继续封装
-类似vue2中的mixin
-自定义hook的优势:可以重复使用代码, 让setup中的逻辑更清楚易懂

打点功能(components/usePoint.js)

import {onMounted, onUnmounted, reactive} from "_vue@3.2.41@vue";

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

    function getPoint(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 usePoint from './components/usePoint.js'

export default {
  name: 'app',
  setup() {
    let p = usePoint
    return p
  },
}
</script>

toRefs

<template>
  <h1>名字:{{ name }}---年龄:{{ age }}</h1>
  <button @click="handleShow">点击显示取消</button>
</template>
<script>
import {toRefs, reactive} from "_vue@3.2.41@vue";

export default {
  name: 'app',
  setup() {
    let data = reactive({
      name: 'barry',
      age: 18,
      isShow: true
    })

    function handleShow() {
      data.isShow = !data.isShow
      data.age++
    }

    return {
      ...toRefs(data),
      handleShow
    }
  },
}
</script>