vue3

Vue3的特性

1. 新的构建工具

• vite

1.2 基本使用

vite基本使用：

• 创建项目 npm init vite-app 项目名称 或者 yarn create vite-app 项目名称
• 安装依赖 npm i 或者 yarn
• 启动项目 npm run dev 或者 yarn dev

1.3 main.js的改变

// 创建一个vue应用
// 1. 导入createApp函数
// 2. 编写一个根组件App.vue，导入进来
// 3. 基于根组件创建应用实例
// 4. 挂载到index.html的#app容器
 
import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

2. 选项api和组合api

• 选项api
  • 各个节点书写不同的代码，如data节点定义数据，methods节点定义方法
• 组合api
  • 数据，方法... 一个实现完整逻辑的功能代码书写在一起

2.1 setup组件选项

• setup是一个新的组件节点，作为使用组合api的起点
• 生命周期函数钩子可以写在里面
• 其生命周期早于beforeCreate
• 在其中定义的数据和函数，需要返回回去

3. 生命周期

认识vue3.0生命周期钩子函数

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

4. 定义响应式数据

• reactive函数
  • 定义复杂数据类型，使之成为响应式数据
  • 常用于定义对象数据
  • toRef用于转换被reactive定义的响应式对象数据的某个属性为响应式数据
  • toRefs用于转换被reactive定义的响应式对象数据的所有属性为响应式数据
  • 修改值时
    • 修改原数据，reactive定义的
    • 修改被转换的，需要加上.value
• ref函数
  • 定义简单或者复杂数据类型，使之成为响应式数据
  • 修改值时需要加上.value

5. 上述特性的一个综合案例

<template>
  <div class="container">
    <div>坐标</div>
    <div>x: {{x}}</div>
    <div>y: {{y}}</div>
    <hr>
    <div>{{count}} <button @click="add">累加1</button></div>
  </div>
</template>
<script>
import { onMounted, onUnmounted, reactive , ref, toRefs} from 'vue'
const useMouse = () => {
    // 1. 记录鼠标坐标
    // 1.1 申明一个响应式数据，他是一个对象，包含x y
    const mouse = reactive({
      x: 0,
      y: 0
    })
    // 1.3 修改响应式数据
    const move = (e) => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    // 1.2 等dom渲染完毕。去监听事件
    onMounted(()=>{
      document.addEventListener('mousemove', move)
    })
    // 1.4 组件消耗，删除事件
    onUnmounted(()=>{
      document.removeEventListener('mousemove', move)
    })
 
    return mouse
}
export default {
  name: 'App',
  setup () {
 
    const mouse = useMouse()
 
    // 2. 数字累加
    const count = ref(0) 
    const add = () => {
      count.value ++
    }
 
 
 
    return { ...toRefs(mouse), count, add }
  }
}
</script>
<style scoped lang="less"></style>