SSG-VUE3.0-听课笔记

不懂就问、不会就学、错了就改

setup

1，理解：Vue3.0

2，setup是所有Composition API（组合式API）“表演的舞台”

3，组件中所有用到的：数据，方法等等，均要配置在setup中。

4，setup函数的两种返回值

• 若返回一个对象，则对象中的属性，方法，在模板中均可以直接使用。（重点关注）
• 若返回一个渲染函数：则可以自定义渲染内容。（了解）

5，注意点：

1，尽量不要与vue2.x配置混用

• Vue2.x配置（data，methods,computed...）中可以访问到setup中的属性，方法。
• 但在setup中不能访问到Vue2.x配置（data,methods,computed...）
• 如果有重名，setup优先。

2，setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但是需要Suspense和异步组件的配合）

ref 函数

• 作用：定义一个响应式的数据

• 语法：const xx = ref(initValue)

  • 创建一个包含响应式数据的**<font color="#F00">引用对象（reference对象）</font>**
  • JS 中操作数据：name.value
  • 模板中读取数据：不需要.value，直接 <div></div>

• 备注：

  • 接收的数据可以是: 基本类型，也可以是对象类型
  • 基本类型的数据：响应式依然靠Object.defineProperty()的get与set完成的
  • 对象类型的数据：内部 ** 求助 ** 了Vue3.0的一个新函数 --- reactive函数。

reactive 函数

• 作用：定义一个 <strong style='color:#F00'>对象类型 </strong>的响应式数据(基本类型不要用它，要用ref函数)

• 语法：

  //接收一个对象（或数组）,返回一个代理对象（Proxy的实例对象，简称Proxy对象）
  const 代理对象 = reactive(原对象) 
  

• reactive 定义的响应式数据是“深层次的”

• 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

Vue3.0的响应式原理

#####     vue2.x的响应式原理

• 对象类型：通过Object.defineProperty()对属性的读取，修改进行拦截（数据劫持）。

• 数据类型：通过重写更新数组的一些列方法来实现拦截。（对数组的变更方法进行了包裹）

  Object.defineProperty(data,'count',{
  	get(){},
  	set(){}
  })
  

• 存在问题

  • 新增属性，删除属性，界面不会更新。
  • 直接通过下标修改数组，界面不会自动更新

  vue3.0的响应式实现原理

  • 通过Proxy(代理):拦截对象中任意的变化，包括：属性值的读写，属性的添加，属性的删除等。
  • 通过Reflect(反射)：对被代理对象(源对象)的属性进行操作

  Proxy:

  Reflect:

reactive 对比 ref

• 从定义数据角度对比：
  • ref用来定义：基本数据类型。
  • reactive用来定义：对象（或者数组）类型。
  • PS:ref也可以用来定义对象（或者数组）类型数据，它内部会自动通过reactive转为代理对象。
• 从原理角度对比:
  • ref通过Object.definePropery的get与set来实现响应式（数据劫持）。
  • reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部的数据。
• 从使用者角度对比：
  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
  • reactive定义的数据：操作数据与读取数据：均不需要.value。

setup的两个注意点

• setup执行的时机：
  • 在beforeCreate之前执行一次，this是undefined。
• setup的参数：
  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
  • context: 上下文对象
    • attrs:值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。
    • slots：收到的插槽内容，相当于this.$slots。
    • emit：分发自定义事件的函数，相当于this.$emit。

computed 函数

与vue2.x中computed配置功能一致

写法

import { computed } from 'vue'

setup(){
	...
	//计算属性--简写
	let fullName = computed(() => {
		return person.firstName + '-' + person.lastName
 	})

	//计算属性--完整写法
	let fullName = computed({
		get(){
			return person.firstName + '-' + person.lastName
		},
		set(value){
			const nameArr = value.split('-')
			person.firstName = nameArr[0]
			person.lastName = nameArr[1]
		}
	})
}

watch 函数

• 与vue2.x中watch配置功能一致
• 两个注意点：
  • 监视reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监听（deep配置无效）
  • 监视reactive定义的响应式数据中某个属性时：deep配置有效。

		/**
		 * watch写法：{immediate:true,deep:true}都是可选
         * watch(监视的参数，监视的回调，监视的配置)
         * watch(监视的参数,(newValue,oldValue)=>{
         *      // .......写的监听方法
         * },{immediate:true,deep:true})
		**/
        /**
         * 1,监视ref所定义的一个响应式数据
         * **/
        watch(sum,(newValue,oldValue) => {
          console.log('ref定义的sum值变化了',newValue,oldValue)
        }) 

        /**
         * 2,监视ref定义的多个响应式数据
         * 2-1：ref定义的多个响应式数据的第一种写法分开写
        */
       watch(sum,(newValue,oldValue) => {
        console.log('ref定义的多个响应式数据的监听---sum变化了',newValue,oldValue)
       })
       watch(msg,(newValue,oldValue) => {
        console.log('ref定义的多个响应式数据的监听---msg变化了',newValue,oldValue)
       }) 

       /**
         * 2,监视ref定义的多个响应式数据
         * 2-2：ref定义的多个响应式数据的第二种写法合并在一起，放到一个数组里面
        */
       watch([sum,msg],(newValue,oldValue)=>{
        console.log('sum或者msg发生了变化',newValue,oldValue)
       })

      /**
       * 3,监视reactive所定义的一个响应式数据的【全部数据】
       *   注意：
       *   3.1这里无法正确获取oldValue
       *   3.2针对于person.job.j1.salary没有开启deep:true也开启了深度监听
       *      deep:false 也不能关闭
       * **/
      watch(person,(newValue,oldValue) => {
        console.log('reactive定义的person发生了变化',newValue,oldValue)
      }) 

      /* 4,监视reactive多定义的一个响应式数据中某个属性
       * （比如只想监听person中的age变化）
       *
     */
      watch(()=>person.name,(newValue,oldValue) => {
        console.log('reactive定义的person发生了变化',newValue,oldValue)
      }) 

      /****
       * 5,监视reactive定义的一个响应式数据中的某些属性
       *  (比如想想监听person.age,person.name)
       *  相当于上面2,4结合
       *  */ 
    watch([()=>person.name,()=>person.age],(newValue,oldValue) => {
      console.log('person的name，age变化了',newValue,oldValue) 
    }) 

    /**
     * 6，特殊情况
     *    改的数据层次比较深，比如person.job.j1.salary 需要添加上{deep:true}
     *    这里监视的是reactive定义的对象中的某个属性（person.job），也就是说第一个参数配置的不再是reactive定义的对象‘person’了，这里的{deep:true}是要配置的，而且是有效的。
     * ** */ 
     watch(()=>person.job,(newValue,oldValue)=>{
      console.log('person的job变化了',newValue,oldValue)
     },{deep:true})

watchEffect函数

• watch:既要指明监视的属性，也要指明监视的回调
• watchEffect:不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
• watchEffect有点像computed
  • 但computed注重计算出来的值（回调函数的返回值），所以必须要写返回值
  • watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(() => {
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

生命周期

• Vue3.0中可以继续使用vue2.x中的生命周期钩子，但是有两个被更名：
  • beforeDestroy 改名为 beforeUnmount
  • destroyed 改名为 unmounted
• Vue3.0也提供了Composition API（组合式API）形式的生命周期钩子,与Vue2.x中钩子相对应关系如下：
  • beforeCreate 对 setup()
  • created 对 setup()
  • beforeMount 对 onBeforeMount
  • mounted 对 onMounted
  • beforeUpdate 对 onBeforeUpdate
  • updated 对 onUpdated
  • beforeUnmount 对 onBeforeUnmout
  • unmounted 对 onUnmounted

自定义hook函数

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

toRef

• 作用：创建一个ref对象，其value值指向另一个对象中的某个属性
• 语法：const name = toRef(person,'name')
• 应用：要将响应式对象中的某个属性单独提供给外部使用时。
• 扩展：toRefs与toRef功能一致，但是可以批量创建多个ref对象，语法：toRefs(person)

shallowReactive shallowRef

• shallowReactive:只处理对象最外层属性的响应式（浅响应式）
• shallowRef:只处理基本数据类型的响应式，不进行对象的响应式处理。
• 什么时候使用？
  • 如果有一个对象数据，结构比较深，但是变化时只是外层属性变化 ====> shallowReactive。
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ====> shallowRef

readonly shallowReadonly

• readonly: 让一个响应式数据变为只读的(深只读)
• shallowReadonly: 让一个响应式数据变为只读的（浅只读）
• 应用场景：不希望数据被修改时

toRaw markRaw

• toRaw:

  • 作用：将一个有 reactive 生成的响应式对象转为普通对象
  • 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

• markRaw:

  • 作用：标记一个对象，使其永远不会再成为响应式对象。

  • 应用场景：

    1，有些值不应该被设置为响应式的，例如复杂的第三方库等。

    2，当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef

• 作用：创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显示控制。
• 实现防抖效果：

<template>
  <input type="text" v-model="keyWord"/>
  <h3>{{ keyWord }}</h3>
</template>

<script>
import { customRef } from 'vue'
export default {
  name: 'App',
  setup(){
    let keyWord = myRef('你好',500)
    // 自定义ref:myRef
    function myRef(value,delay){
      let timer
      return customRef((track,trigger) => {
        return {
          get(){
            console.log(`有人从myRef这个容器中读取了数据，${value}`)
            track() //通过Vue追踪value变化（提前和get商量一下，让他知道这个value是有用的）
            return value
          },
          set(newValue){
            console.log(`有人把myRef这个容器中数据改为了${newValue}`)
            clearTimeout(timer)
            timer = setTimeout(() => {
              value = newValue
              trigger() //通知vue去重新解析模板
            }, delay);
          }
        }
      })
    }
    return {
      keyWord
    }
  }
}
</script>

provide inject

• 作用：实现祖与后代组件间通信。

• 套路：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据

• 具体写法：

  • 父组件中：

    setup(){
    	......
    	let car = reactive({name:'奔驰',price:'40W'})
    	provide('car',car)
    	......
    }
    

  • 后代组件中：

    setup(props,context){
    	......
    	const car = inject('car')
    	return {car}
    	......
    }
    

响应式数据的判断

• isRef:检查一个值是否为一个ref对象
• isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
• isReadonly:检查一个对象是否是由 readonly 创建的只读代理
• isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

新的组件

Fragment

• 在Vue2.x中，组件必须有一个根标签
• 在Vue3.0中，组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中。
• 好处：减少标签层级，减少内存占用

Teleport

• Teleport是一种能够将我们的组件html结构移动到指定位置的技术

<Teleport to="body">
    <div class="mask" v-if="isShow">
        <div class="dialog">
            <h3>标题</h3>
            <p>寒暄一下吧，你好，胡歌</p>
            <button @click="isShow = false">关闭</button>
    	</div>
   	</div>
</Teleport>

Suspense

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

• 使用步骤

  • 异步引入组件

    import {defineAsyncComponent } from 'vue'
    const child = defineAsyncComponent(() => import('./components/Child.vue'))
    

  • 使用Suspense包过组件，并配置好default与fallback

    <template>
    	<div class="app">
            <Suspense>
        		<template v-slot:default>
    				<Child/>
    			</template>
    			<template v-slot:fallback>
    				<h3>
                        加载中....
                    </h3>
    			</template>
        	</Suspense>
        </div>
    </template>
    

全局API的转移

• Vue2.X有许多全局API和配置。
  • 注册全局组件，注册全局指令等
• Vue3.0中对这些API做出了调整：
  • 将全局的API，即Vue.XXX调整到应用实例app上