vue3.0基础(一)

vue3.0基础(一)

• 选项API和组合API
• 组合API-setup函数
• 组合API的生命周期(DOM渲染前后)
• 组合API-reactive函数
• 组合API-toRef函数
• 组合API-toRefs函数

// 项目入口文件

// vue2.0 导入App组件,导入Vue构造函数,使用vue初始化vue实例 使用render 使用App组件 挂载#App容器下

// vue3.0 导入App组件,按需从vue导入createApp的函数使用这个函数创建应用实例,挂载#app容器下
// 基于创建好的app实例扩展功能

import { createApp} from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

// const app = createApp(App)
// app.mount('#app')

选项API和组合API

vue3支持选项api,用vue3要使用组合api
什么是选项API : Options Api (适合初学者)
什么是组合API : Compositon API

选项API

咱们在vue2.x项目中使用的就是 选项API 写法
代码风格：data选项写数据，methods选项写函数…，一个功能逻辑的代码分散。
👉👉优点：易于学习和使用，写代码的位置已经约定好
👉👉缺点：代码组织性差，相似的逻辑代码不便于复用，逻辑复杂代码多了不好阅读。
补充：虽然提供mixins用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。

组合API写法

咱们在vue3.0项目中将会使用 组合API 写法
👉👉代码风格：一个功能逻辑的代码组织在一起（包含数据，函数…）
👉👉优点：功能逻辑复杂繁多情况下，各个功能逻辑代码组织再一起，便于阅读和维护
👉👉缺点：需要有良好的代码组织能力和拆分逻辑能力，PS：大家没问题。
补充：为了能让大家较好的过渡到vue3.0的版本来，也支持vue2.x选项API写法

组合API-setup函数

定义: 组合API的使用起点就是setup()函数,比beforCreate更早执行,不能直接使用this

如何定义一个数据:

setup () {
console.log('setup')
// 这里可以自定义函数、数据
   // 定义数据和函数
    const msg = 'hi vue3'
    const say = () => {
      console.log(msg)
    }
// 如果模板中需要使用数据和函数需要在setup中返回
return{
	msg:'hi vue3'
}
}

组合API中的声明周期

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

重点说一下组件DOM渲染前后(这里的改动)

<template>
 <div class="container">
    container
  </div>
</template>
<script>
// 调哪个钩子这里引用哪个钩子,一般自动引入
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    // 渲染前
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    // 渲染后
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    // 继续写一个渲染后
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}
</script>
}

组合API-reactive函数

定义:reactive是一个函数，它只能定义一个复杂数据类型(对象或数组)，成为响应式数据，不能修改整个对象（地址），定义后的数据要通过对象的形式返回出去 如：return { obj }

<template>
 <div class="container">
    <p>姓名:{{obj.name}} </p>
    <p>年龄:{{obj.age}} </p>
    <button @click="updataName">修改</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name:'App',
  setup () {
  // const obj = {
  //   name : '小明',
  //   age : 18
  // }
  // 声明响应式数据:reactive 类型为 对象 数组
  // reactive 也是一个api
  const obj = reactive({
    name:'小明',
    age:18
  })
  // 修改名称
  const updataName = () =>{
    console.log('ok')
    obj.name = '小刚'
  }
  return {obj,updataName}
  },
}
</script>

组合API-ref函数

定义:ref函数可以定义简单和复杂数据类型，在js中调用更改需要加.value(模板不需要加)
可以修改复杂的整个对象(地址) 如:设置为空对象

<template>
  <h1>ref函数的使用</h1>
  <hr>
  <ul>
    <li>{{ obj.name }}</li>
    <li>{{ obj.age }}</li>
    <button @click="motFn">修改对象</button>
  </ul>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 定义简单数据类型
    const app = ref(0)
    const bool = ref(false)
    // 定义复杂数据类型
    const obj = ref({
      name: '小明',
      age: 18
    })
    // 修改
    const motFn = () => {
      obj.value = {}
    }
    // 将数据(包括函数)返回出去
    return { app, bool, obj, motFn }
  }
}
</script>

组合API-toRef函数

定义:toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

<template>
  <div class="container">
    <p>姓名:{{ name }}</p>
    <button @click="updataName">修改name</button>
  </div>
</template>
<script>
import { reactive, toRef } from "vue";
export default {
  name: "App",
  setup() {
    const obj = reactive({
      name: "小明",
      age: 18,
    });
    // 模本中只能想要是对象中的name数据,没有必要返回一个对象给模板
    // 定义常量所有不能改
    // const {name} = obj
    // 语法通过但是不能驱动视图,数据能改成功
    // 通过解构赋值得到响应式对象中的某项数据,它就不在是响应式数据了
    // 通过toRef函数可以将,响应式对象中的某一项数据,转化为响应式数据
    // let {name} = obj
    // const updataName = () =>{
    //   name  = '小刚'
    // }
    // 取出响应数据的一项值那么使用toRef函数
    const name = toRef(obj, "name");
    const updataName = () => {
      // const name 定义的数据,不能重新赋值
      // name = "小刚";

      // name对象中有_v_isRef 为true的时候,模板解析右键这个标记直接取value值
      // 因为name包装成了一个对象,里面会有一个value属性就是值
      name.value = '小刚'
    };
    return { name, updataName };
  },
};
</script>

组合API-toRefs函数

定义:toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

<template>
  <div class="container">
    <p>姓名:{{ name }}</p>
    <p>年龄:{{ age }}</p>
    <button @click="updataName">修改name</button>
  </div>
</template>
<script>
import { reactive, toRef, toRefs } from "vue";
export default {
  name: "App",
  setup() {
    const obj = reactive({
      name: "小明",
      age: 18,
    });
  
    const updataName = () => { 
      obj.name = '小刚'
    };

    // 1. 解构响应式对象后,每个数据会丢失响应式
    // 2. 使用展开运算符展开对象后,对象的每一个属性也不是响应式了
    // 3. toRef是把对象中一个属性数据,改变响应式数据
    // 4. toRefs是把整个对象所以属性数据,通通改成响应式数据
    // const allData = toRefs(obj)
    // return { ...allData, updataName };
    // 也可以简写
    return { ...toRefs(obj),updataName}
  },
};
</script>

使用场景：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。