Vue3学习日记(二)

这是学习Vue3相比Vue2的第二部分，主要讨论计算属性与监视、生命周期和自定义属性等

一、计算属性

• 与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配置功能一致
  新的watch可以监听多个属性,原先的只能一个

		// 情况一：监视ref所定义的一个响应式数据
			watch(sum,(newValue,oldValue)=>{
				console.log('sum变了',newValue,oldValue)
			},{immediate:true})

			//情况二：监视ref所定义的多个响应式数据
			watch([sum,msg],(newValue,oldValue)=>{
				console.log('sum或msg变了',newValue,oldValue)
			},{immediate:true})

• 两个小“坑”,deep无法监视对象数据类型
• 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。

	 watch(person,(newValue,oldValue)=>{
				console.log('person变化了',newValue,oldValue)
			},{deep:false}) //此处的deep配置无效 

• 监视reactive定义的响应式数据中某个属性时：deep配置有效。才会有效

	watch(()=>person.name,(newValue,oldValue)=>{
				console.log('person的name变化了',newValue,oldValue)
			}) 

同时也可以监听里面的多个属性

	watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
				console.log('person的name或age变化了',newValue,oldValue)
			}) 

监视的是reactive素定义的对象中的属性，配置的deep有效

三、watchEffect函数

• watch的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect有点像computed：

  • 但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。(作用就是当变化的时候执行回调)

四、生命周期

Vue2和Vue3的生命周期进行比较

1. 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

两个生命周期的比较
Vue2

Vue3

五、自定义hook

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

• 类似于vue2.x中的mixin。

• 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
  定义一个自定义的hooks

import { reactive,onMounted,onBeforeUnmount} from "vue";

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

	 //实现鼠标“打点”相关的方法
	function savePoint(event){
		point.x = event.pageX
		point.y = event.pageY
		console.log(event.pageX,event.pageY)
	}

	// 实现鼠标打点相关的生命周期钩子
	onMounted(() => {
		window.addEventListener('click',savePoint)
	}),

	onBeforeUnmount(()=>{
		window.removeEventListener('click',savePoint)
	})
	return point

}

使用hooks
效果

<template>
	<h2>我是Test组件</h2>
	<h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
	import usePoint from '../hooks/usePoint'
	export default {
		name:'Test',
		setup(){
			const point = usePoint()
			return {point}
		}
	}
</script>

六、toRef

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs与toRef功能一致，但可以批量创建多个 ref 对象，语法：```toRefs(person)``

toref和ref的比较和作用

1、ref就是复制 复制是不会影响原始数据的

如果利用ref将某一个对象中的某一个属性值变成响应式数据

我们修改响应式数据是不会影响原始数据的;

同时视图会跟新。

ref就是复制 复制是不会影响原始数据的

<template>
 <div>
    <div>
      <div>{{stateObj}}</div>
       <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"张三",age:22}
    
    //将对象中的某一个属性
    //变成响应式数据
    //而不是将对象变成响应式数据
    let stateObj=ref(obj.name)
    function func1(){
      stateObj.value="张三变成李四";
      //原始数据没有发生改变 原始数据obj {name: "张三", age: 22}
      console.log("原始数据obj",obj)

      //响应式数据发生改变了  
      /**
      响应式stateObj RefImpl {
          _rawValue: "张三变成李四", _shallow: false,
          __v_isRef: true, _value: "张三变成李四"
      }
      **/
      //变成了一个ref的对象
      console.log("响应式stateObj",stateObj)

    }

    return {stateObj,func1}
},
}
</script>

2.toRef是引用,视图不跟新

如果利用toRef将某一个对象中的属性变成了响应式的数据

我们修改响应式的数据是会影响原始数据的

如果数据是通过toRef创建的，修改值后，数据不会触发视图

toRef是引用；它引用的是以前那个对象中的属性

所以你修改后，会影响到原始数据终中的值

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">按钮</button>
    </div>
 </div>
</template>
<script>
import {toRef} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"张三",age:22}
    //将对象中的某一个属性name变成响应式数据
    //而不是将对象变成响应式数据
    let state=toRef(obj, 'name');
    console.log('toRef',state)
    function func1(){
      state.value="我是李四";
      console.log('obj',obj)
      console.log('state',state)
    }
    return {state,func1}
  },
}
</script>