【学习打卡】第6天【2022版】Vue3 系统入门与项目实战第六讲-原创手记-慕课网

课程名称： 2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节： Composition API

主讲老师： Dell

课程内容：

今天学习的内容包括：

ref,reactive响应式的引用原理：通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新。

ref处理基本数据类型：proxy，变成proxy({value:’’})这样的一个响应式的引用

reactive处理非基本数据类型：proxy，变成proxy({name:’’})这样的一个响应式的引用

ref：将简单类型的数据变成响应式

reactive：将数组、对象变成响应式

toRefs：将响应式的对象（proxy({ name: ‘abc’ })），转变成 { name: proxy({ value: ‘abc’ }) }，这样对name进行解构操作，name也是响应式的。若在其上取不存在的属性，获取的是undefined

toRef：在对象上取不存在的属性时，找不到的话不会像toRefs一下拿到的是undefined，而是给这个属性一个默认的空值（不推荐使用）

attrs：None-Props 属性

slots：插槽，获取到slot.defaul

emit：相当于传统语法中的this.$emit的作用

watch 侦听器
1、具有一定的惰性，只有变化时才执行
2、参数可以拿到当前值和原始值。watch(侦听内容, (当前值，原始值）=> {…})
3、watch侦听的是getter/effect函数、ref、响应式对象、或者这些类型的数组
4、若侦听的是reactive类型, 变为函数。如watch( () => nameObj.name, (cur, per) => {…} )
5、侦听多个数据。如 watch( [() => obj.name, () => obj.age], ([nameCur, ageCur], [namePre, agePre]) => {…} )

watchEffect侦听器： watchEffect(()=> { … })
1、立即执行，没有惰性；
2、不需要传递需要侦听的内容，自动感知代码依赖；不需要传递多个参数，只需要传递一个回调函数
3、不能获取之前数据的值

课程收获：

6.1 心得：

为什么要用setup(),之前老语法在面对比较复杂的组件去开发的时候，数据，方法都是去分开写的，这就导致，维护，可读性差；

setup()何时去执行，beforecreate

之前像是methods,return {} 这些全部被setup（）去包裹，那么如果你想要去使用一些数据，与方法，需要将这些内容，return出去，也就是说，暴露出去，组件就可以来使用这些内容了

this是不是指向的就是实例化的对象，但是由于，此时未实例化，所以，this 指向为空

但是当组件实例化完成之后，然后我就可以去调用setup() 了，因为setup在实例化完成之前，就创建好了

setup：created 实例被完全初始化之前执行的函数，所以用不了this

setup（props，context）{

    return {

        name：‘dell’，

        handClick：（）=> {

            alert（123）

        }

    }

}

6.2/6.3 心得：

ref、reactive 响应式的引用：

原理：通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新

ref：处理基础类型的数据

const  { ref } = Vue；

//  proxy，‘dell’变成proxy（{value：‘dell’}） 这样一个响应式引用

let name = ref（‘dell’）；

name.value = ‘lee’；

reactive：处理非基础类型的数据

const  { reactive } = Vue；

//  proxy，{ name：‘dell’}变成proxy（{ name：‘dell’}） 这样一个响应式引用

const  nameObject =reactive（{ name：‘dell’}）；

nameObject.name = ‘lee’；

让数据只读使用readonly() 函数
如果直接解构setup里reactive()的数组或者对象是在外面不可用的，因为reactive只是将数组/对象变成了响应式，但是没有将里面的每一项变成响应式，单独的只是一个字符串/数字等。
如果要想解构，需要用到toRefs()函数
他将proxy({name: 'cmy', age: '18' }) ===>

proxy({
name: proxy({ value: 'cmy' }),
age: proxy({value: 18})
})

外面可以直接引用name、age 相当于引用name.value、age.value

readonly：使响应式应用只读，不可修改

const copyName = readonly（nameObj）；

toRefs：可以进行解构（reactive无法进行解构）

//  proxy（{ name：‘dell’}）  =>  { name：proxy（{ value：‘dell’}）}

const { name } = toRefs（nameObj）；

return { name }

6.4/6.5 心得

toRefs() 如果引用的数据里面没有某个字段，他不会给默认值，而是会说明该字段是undefined
如果不想要避免这种情况，可以使用toRef()函数。使用如下图，它会使不存在的也具有响应式
但不建议使用该方法，也不建议使用添加数据中没有的字段，若要使用，就在数据中心添加该字段，给一个空值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
//ref，reactive 响应式的引用
//原理，通过proxy对数据进行封装，当数据变化时，出发模板等内容的更新
//ref 处理基础类型的数据，如字符串，数字等(不适合数组对象等)
//reactive 处理非基础类型的数据
const app = Vue.createApp({
template: `
           <div>{{nameArray[0]}}</div>
       `,
setup(props,context) {
// const { ref } = Vue
// //proxy,'dell'变成 proxy({value:'dell'})这样的响应式引用
// let name = ref('dell');
// setTimeout(() => {
//     name = 'lee'
// }, 2000);
// return { name }
// const { reactive } = Vue
// //proxy,'dell'变成 proxy({value:'dell'})这样的响应式引用
// let nameObj = reactive({name:'dell'});
// setTimeout(() => {
//     nameObj.name = 'lee'
// }, 2000);
// return { nameObj }
// const { reactive } = Vue
// //proxy,'dell'变成 proxy(['dell'])这样的响应式引用
// let nameArray = reactive(['dell']);
// setTimeout(() => {
//     nameArray[0] = 'lee'
// }, 2000);
// return { nameArray }
const { reactive, toRefs } = Vue
//proxy,'dell'变成 proxy(['dell'])这样的响应式引用
let nameObj = reactive({name:'dell',age:23});
setTimeout(() => {
nameObj.name = 'lee'
}, 2000);
//toRefs proxy({ name:'dell',age:23})转化成{
//  name: proxy({ value: 'dell'}),
//  age: proxy({ value: 23})
// }
const { name } = toRefs(nameObj)
return { name }
//readOnly不允许修改
// const { readOnly } = Vue
// let nameReadOnly = readOnly(['dell']);
// setTimeout(() => {
//     nameReadOnly[0] = 'lee'
// }, 2000);
// return { nameReadOnly }
}
})
const vm = app.mount('#root')
</script>
</html>

6.5 心得：

setup（props，context）{ }

context共有三个值 attrs，slots，emit

attrs 接收No-props属性

slots 是插槽， slots.defalut() 【例子如下图】他接收了父组件传来的值parent，以前的用法如mounted函数中的例子

emit: 代替this.$emit 子组件向外出发事件

const  { attrs，slots，emit }  =  context；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
//toRef
const app = Vue.createApp({
methods: {
handleChange(){
alert('change')
}
},
template: `
           <child app="app" @change="handleChange">parent</child>
       `
});
app.component('child',{
template: `
           <div @click="handleClick">12122</div>
       `,
setup(props, context) {
const { h } = Vue
const { attrs, slots, emit } = context
console.log('attrs',attrs.app)
console.log('slots',slots.default())
//return () => h ('div',{},slot.default())
function handleClick() {
emit('change')
}
return { handleClick }
}
})
const vm = app.mount('#root')
</script>
</html>

6.6/6.7 心得：

reactive来定义非基础类型

 // 和list相关的代码
    const listRelative = ()=>{
        const {reactive} = Vue
        const list = reactive([])
        handleClick = (inputvalue)=>{
            if(inputvalue){
                list.push(inputvalue)
            }  
        }
        return {
            list,
            handleClick
        }
    }
    // 和输入框相关的代码
    const inputRef = ()=>{
        const {ref}= Vue
        const inputValue = ref('')
        handleInput = (e)=>{
            inputValue.value = e.target.value
        }
        return {
            inputValue,
            handleInput
        }
    }
    const app = Vue.createApp({
        template:`
            <div>
                <div>
                    <input :value="inputValue" @input="handleInput"/>
                    <button @click="handleClick(inputValue)">提交</button>
                </div>
                <ul>
                    <li v-for="(item,index) in list">{{item}}</li>
                </ul>
            </div>
        `,
        setup(){        
            const {list,handleClick} = listRelative()
            const {inputValue,handleInput} = inputRef()
            return {
                list,
                inputValue,
                handleInput,
                handleClick
            }
        }
    })
    const vm = app.mount('#root')

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数;

如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event；

6.8 心得：

具备get和set的计算属性

const app = Vue.createApp({
 setup() {
   const { reactive, computed } = Vue;
   const countObj = reactive({ count: 0});
   const handleClick = () => {
     countObj.count += 1;
   }
   let countAddFive = computed({
     get: () => {
       return countObj.count + 5;
     },
     set: (param) => {
       countObj.count = param - 5;
     }
   })

   setTimeout(() => {
     countAddFive.value = 100;
   }, 3000)

   return { countObj, countAddFive, handleClick }
 },
 template: `
   <div>
     <span @click="handleClick">{{countObj.count}}</span> -- {{countAddFive}}
   </div>
 `,
});

如果是只用get，则计算属性传入一个函数，

如果是要用get和set，则计算属性要传一个对象。

6.9/6.10 心得：

watch监听器：
具有一定的惰性 lazy （首次页面展示时不会执行）

参数可以拿到原始和当前值

setup（）{

    const { ref，watch }  =  Vue；

    const name = ref（‘lee’）；

    watch（name，（currentValue，preValue）=> {

            console.log（currentValue，preValue）

    }）

    return { name }

}

监听reactive复杂类型的数据，需要用箭头函数的方式监听

setup（）{

    const { reactive，watch }  =  Vue；

    const nameObj = reactive（{ name：‘lee’ }）；

    watch（（）=> nameObj name，（currentValue，preValue）=> {

            console.log（currentValue，preValue）

    }）

    cosnt { name }  =  toRefs（nameObj）；

    return { name }

}

可以侦听多个数据的变化，用一个侦听器承载（用数组来操作）

setup（）{

    const { reactive，watch }  =  Vue；

    const nameObj = reactive（{ name：‘lee’，englishName：‘dell’ }）；

    watch（[（）=> nameObj name，（）=> nameObj englishName]，（ [curName，curEng]，[ preName，preEng ] ）=> {

            console.log（curName，preName，‘——’，curEng，preEng ）

    }）

    cosnt { name }  =  toRefs（nameObj）；

    return { name }

}

watchEffect 侦听器，偏向于 effect （更适合异步的请求）

1、立即执行，没有惰性 immediate

2、不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数

3、不能获取之前数据的值

setup（）{

    cosnt { watchEffect  } = Vue；

    watchEffect （（）=>{

        console.log（nameObj.name）

        console.log（nameObj.englishName）

    }）

}

停止监听器（watch和watchEffect通用）

setup（）{

    cosnt { watchEffect  } = Vue；

    const  stop = watchEffect （（）=>{

        console.log（nameObj.name）

        console.log（nameObj.englishName）

        setTimeout（（）=>{

                stop（）；

        }，5000）

    }）

}

watch也可以做非惰性的监听（配置{ immediate：true }）

setup（）{

    const { reactive，watch }  =  Vue；

    const nameObj = reactive（{ name：‘lee’，englishName：‘dell’ }）；

    watch（[（）=> nameObj name，（）=> nameObj englishName]，（ [curName，curEng]，[ preName，preEng ] ）=> {

            console.log（curName，preName，‘——’，curEng，preEng ）

    }，{ immediate：true }）

    cosnt { name }  =  toRefs（nameObj）；

    return { name }

}

6.11 心得：

beforeMount => onBeforeMount

mounted => onMounted

beforeUpdate => onBeforeUpdate

beforeUnmount => onBeforeUnmount // 组件从页面移除的时候执行该方法

unmounted => onUnmounted // 组件从页面移除之后执行该方法

setup的生命周期中没有beforeCreate，created两个函数，因为setup执行的时间就在这两个函数之间

新的生命周期：

onRenderTracked：每次渲染之后重新收集响应式依赖的时候会自动执行的函数

onRenderTriggerd：每次触发页面重新渲染时候自动执行的函数
setup中生命周期函数的写法

const app = Vue.createApp({
 // beforeMount => onBeforeMount
 // mounted => onMounted
 // beforeUpdate => onBeforeUpdate
 // beforeUnmount => onBeforeUnmount
 // unmouted => onUnmounted
 setup() {
   const {
     ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated,
     onRenderTracked, onRenderTriggered
   } = Vue;
   const name = ref('dell')
   onBeforeMount(() => {
     console.log('onBeforeMount')
   })
   onMounted(() => {
     console.log('onMounted')
   })
   onBeforeUpdate(() => {
     console.log('onBeforeUpdate')
   })
   onUpdated(() => {
     console.log('onUpdated')
   })
   // 每次渲染后重新收集响应式依赖
   onRenderTracked(() => {
     console.log('onRenderTracked')
   })
   // 每次触发页面重新渲染时自动执行
   onRenderTriggered(() => {
     console.log('onRenderTriggered')
   })
   const handleClick = () => {
     name.value = 'lee'
   }
   return { name, handleClick }
 },
 template: `
   <div @click="handleClick">
     {{name}}
   </div>
 `,
});

生命周期函数的新写法 ,beforeCreate ,created 没有新写法。因为setup()执行在他俩之间

6.12 心得：

const app = Vue.createApp({ 

	setup(){

		const{ provide }= Vue; 

		provide('name', 'dell'); 

		return {}

},

template: 

	<div> 

		<child/> 

	</div> 

});

app. component('child',{ 

	setup(){

	const { inject }= Vue;

	const name = inject('name', 'hello'); 

	return { name }

},

	template: '<div>{{name}}</div>' 

})

单向数据流：谁的值由谁更改（子组件不能更改父组件的数据）

父组件传递方法：

const app = Vue.createApp({ 

	setup(){

		const { provide, ref }= Vue;

		const name = ref('dell'); 

		provide('name', name);

		provide('changeName',(value) => { 

			name.value = value;

})

	return{} 

},

子组件调用父组件的方法：

app.component('child',{

setup(){

	const { inject }=Vue; 

	const name = inject('name');

	const changeName = inject('changeName'); 

	const handleClick=()=>{

		changeName('Lee'); 

}

	return { name, handleClick} 

},

	template: '<div @click="handleClick">{{name}}</div>'

想要获取ref绑定的dom，需要const hello = ref（null），再由hello.vue获取到dom

// CompositionAPI 的语法下，获取真实的 DOM 元素节点 

const app = Vue.createApp({

	setup(){

		const { ref, onMounted}=Vue;

		const hello = ref(null);

		onMounted(() => {

		console.log(hello.value); 

})

		return { hello0 } 

},

图片描述