vue3知识点的自我总结

1. 我们对ref的错误理解

ref 经常去监听基本数据类型。
同时也可以去监听【数组】【对象】都是可以的。
ref是深度的监听。并不是大家说的那样不能去监听复杂的数据类型。

只是根据我们推荐ref去监听基本数据类型。
reactive 去监听引用数据类型。
在项目中  reactive我们使用的较多一些

2 isRef,isReactive 类型判断

//判断是否是ref类型
console.log(isRef(state));//true

//是否是reactive类型的
console.log(isReactive(state));//false

4 computed 的使用场景

判断按钮是否可以进行点击，就可以使用computed

5 watch的使用

mmediate:true 表示的是会默认执行一次watch，
这样界面初次渲染数据才能够正确的显示姓和名的拼接。

deep:true,表示的是会进行深度的监听,
当我们监听的是一个对象，对象中的任何一个值发生变化的时候。
watch就会监听到.

监听ref
const year = ref(100);
setTimeout(() => {
  year.value++;
}, 1000);

watch(() => state.value, (newValue, oldValue) => {
  console.log("新值:", newValue, "老值:", oldValue);
});

监听reactive
const state = reactive({ nickname: "xiaofan", age: 20 });
setTimeout(() => {
  state.age++;
}, 800);

// 修改age值时会触发 watch的回调
watch(
  () => state.age,   //监听state中的age
  (newValue, oldValue) => {
	console.log("新值:", newValue, "老值:", oldValue);
  }
);

监听多个值
watch(()=>[state.value,   person.name ],([newAge,newName], [oldAge, oldName])=>{
  console.log("年龄new:", newAge, "年龄old:", oldAge);
  console.log("名称new:", newName,"年龄old:", oldName);
},);
// 如果监听多个对象，第一个函数返回一个数组，
//数组中表示监听的值  ()=>[state.value,   person.name ]
// 第二个匿名函数， ([new1,new2],[old1,old2])=>{ }

停止watch的监听

// 修改age值时会触发 watch的回调
let stopWatch=watch(
  () => person.name,   //监听state中的age
  (newValue, oldValue) => {
	 console.log("新值:", newValue, "老值:", oldValue);
  }
);

// 停止watch监听
let cancelHander=()=>{
  stopWatch()
}
什么时候运用停止watch监听了，页面销毁的时候？
感觉没有必要。因为已经销毁了。感觉有点鸡肋

6 watchEffect 的用法

需要引入watchEffect 这个方法进行监视，不需要配置immediate:true，
本身就会被默认执行一次。即使你不写监听对象也会被触发一次
需要注意：我没有监听对象，但是我回默认执行一次

watchEffect(()=>{
    console.log('我没有监听对象，但是我回默认执行一次 ！！');
})

7 toRefs 进行进行解构，可以实现快速展示内容 【项目中经常使用】

需要的是，不要把字段整重复了哈。
这样你不知道这个字段到底对应的哪一个字段
项目中也应该又重复的字段【或者相近的字段】

8. VUe2.0 和 Vue3.0 的生命周期作对比

beforeCreate -> 请使用 setup()
created -> 请使用 setup()

beforeMount -> onBeforeMount
mounted -> onMounted

beforeUpdate -> onBeforeUpdate
updated -> onUpdated

<!-- 完全发生了改变哈 -->
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

我们发现vue3.0的生命周期执行发生在vue2.0生命周期的前面哈~
【setUp这个生命周期发生在beforeCreate和created之前的哈】【需要注意】。
两种形式的生命周期函数是可以共存，它们都会被执行。

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

如果利用ref将某一个对象中的某一个属性值变成响应式数据
我们修改响应式数据是不会影响原始数据的;
同时视图会跟新。
ref就是复制 复制是不会影响原始数据的

代码解释
let obj={name:"张三",age:22}
//将对象中的某一个属性变成响应式数据
let stateObj=ref(obj.name)
function func1(){
    stateObj.value="张三变成李四";
    //原始数据没有发生改变 原始数据obj {name: "张三", age: 22}

    // stateObj.value ==>变成了 【张三变成李四】
}

他的运用场景在哪里？？？
没有运用场景的知识点是【鸡肋】~~。

10. toRef

toRef 引用， 修改响应式的数据，会影响以前的数据，界面不会更新。

代码详细讲解：
let obj={name:"张三",age:22}
// 将obj中的name变成响应式的
let state=toRef(obj, 'name');
console.log('toRef',state) // name:"张三",age:22

function func1(){
    state.value="我是李四";
    console.log('obj',obj) // {name:"我是李四",age:22}
    console.log('state',state.value) //我是李四
}
// 视图不会跟新
return {state,func1}

这种的运用场景在哪里？？？
没有运用场景的知识点是【鸡肋】~~。

11 setup的两个参数

props ==》 父组件传递过来的参数
context==> 是一个对象包含 { attrs,slots,emit }

setup(props,{attrs,slots,emit}){
    //直接使用emit进行事件派发
    function sonHander(){
        emit('sonclick','子组件传递给父组件')
    }
    return {sonHander}
}

12 provide和inject

provide和inject可以实现嵌套组件之间进行传递数据。
这两个函数都是在setup函数中使用的。
父级组件使用provide向下进行传递数据；
子级组件使用inject来获取上级组件传递过来的数据；
需要注意的是：
1==>provide只能够向下进行传递数据
2==>在使用provide和inject的时候需从vue中引入

let giveSunziData=ref({
    with:100,
    height:50,
    bg:'pink'
})
// 第一个参数是是共享数据的名称(giveSunzi)
// 第二个参数是共享的数据(giveSunziData)
provide('giveSunzi',giveSunziData)

子组件 进行接受就可以了
let getFaytherData=inject('giveSunzi');

13 使用 shallowReactive 非深度监听

默认情况下，无论是通过 ref 还是 reactive 都是深度监听。
所以Vue3为我们提供了，shallowReactive进行【非深度监听】。
shallowReactive只会包装【第一层的数据】
默认情况它只能够监听数据的第一层。
如果想更改多层的数据，
你必须先更改第一层的数据。
然后在去更改其他层的数据。
这样视图上的数据才会发生变化。

//  直接更改其他层的数据，会失败的哈
// state.b.c.d1.f1.f1="f1f1f1f1"

// 先更改第一层，然后在更改其他层就会成功
state.a="啊啊啊"
state.b.c.d1.f1.f1="f1f1f1f1"

这样跟新数据确实鸡肋 2021.1.10
当处理页面上对象只有一层的时候，非常有用的哈。 2021.1.14
并不是我想得那样鸡肋，非常有用的

14 shallowRef 进行非深度监听

注意点：如果是通过shallowRef创建的数据。
那么Vue监听的是.value 变化。
并不是第一层的数据的变化。
因此如果要更改shallowRef创建的数据。
应该xxx.value={}

还有一种方法triggerRef 可以直接去更改。
shallowRef创建数据的某一层。
需要我们注意的是：vue3中值提供了triggerRef这个方法，
但是并没有提供triggerReactive的方法。
也就是说triggerRef 【不可以】去更改shallowReactive创建的数据

//  直接更改你需要修改某一层的数据
state.value.b.c.d1.f1="我是f1";
triggerRef(state)

15 readonly 深度只读

被readonly包裹的数据只能够读取。
是一个深度只读，不能够修改。
我们看一下面的代码。
我们想修改值,但是修改后视图无响应。
并且控制台警告目标为只读

 let state=reactive({
    name:"张三",
})
// viewSate这个数据只能够读取
// 是一个深度只读，不能够修改
let viewSate=readonly(state)
function func1(){
viewSate.name="李四"
}

16 shallowReadonly 浅只读

shallowReadonly中放了一个对象，
对象中de直接属性是不可以修改的；
如果对象下的属性下还有对象,
那么这个对象下的属性就可以修改的.

let state=reactive({
    name:"张三",
    info:{
        h:1.90,
        w:'64kg'
    }
})
let viewSate=shallowReadonly(state)
function func1(){
    // 修改失败
    // viewSate.name="李四"
    // 修改成功
    viewSate.info.w="128斤"
}

17 toRaw将代理对象变成普通对象

toRaw将代理对象变成普通对象。
这个时候我们的数据已经不再是响应式的数据了。
所以修改普通对象的时候,
虽然数据发生变化了,但是视图将不会更新
但是如果修改的是响应式对象，数据是会发生改变的。

let state=reactive({
    name:"张三",
    age:20,
})
// toRaw将代理对象变成普通对象
let viewSate=toRaw(state)

function changeView(){
    viewSate.age=40; //视图仍然是  20
    console.log(state);// Proxy {name: "张三", age: 40}
    console.log(viewSate);//{name: "张三", age: 40}
    state.name='张三变成李四' //视图发生改变 张三变成李四
}
读音： Raw  [rua]

18. 类型判断的四种方法

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

有什么用了？可能只有面试的时候会使用

19 vue中设置props参数类型

propB: [String, Number],  多个可能的类型

// 必填的字符串
propC: {
    type: String,
    required: true
},

// 自定义验证函数
propF: {
    validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
},

20 vue3 父组件调用子组件中的方法

<list-com ref="listRef"></list-com>
let listRef=ref()
父组件调用了子组件中的方法，并且传递了参数
listRef.value.fatherMess([{name:'杨洋'}])

21 vue2 中调用子组件的方法

this.$refs.xxx.子组件的名称(parmas)

22 vue3 子组件调用父组件的方法

setup (props,{attrs,slots,emit}) {
    function getHander(){
        // 不能够在使用原来的 this.$partent.xxx()这种方式了
        emit('myclick','给父组件的值' )
    }
    return {getHander}
}

23 穿透属性的写法

.left-swp :deep(.slick-dots) {
    width: 36% !important;
    bottom: 20px !important;
    right: 10px !important;
}
left-swp是你的父级
slick-dots 第三方都类名

24. teleport 传送门

teleport有传送的意思，读音【te li po t】[嘻嘻],
官方说：Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，
上面这一句话是说传送到除了app之外的地方。
我们将弹窗组件移动到body下

<a-button type="primary" @click="openHander">open</a-button>
<!-- 将内容区域的代码移动到body下 -->

<teleport to='body'>
    <div class="mask" v-if="showFlag">
    <div>
        我是内容哈哈
    </div>
        <a-button  @click="openHander">关闭</a-button>
    </div>
</teleport>

const openHander=()=>{
    showFlag.value=true
}

keep-alive的使用

<router-view v-slot="{ Component }">
	<!--以cache开头和page结尾的页面名称将会被缓存 -->
	<keep-alive :include="/cache.*?\page/gi">
		<component :is="Component" />
	</keep-alive>
</router-view>

export default {
    name:'cache_demo_page', // keep-alive中include属性匹配组件name.
    setup() {
	    return{

	    }
    }
}

keep-alive中max属性:
此外，keep-alive还有一个max属性，代表缓存组件或者页面最大数量。
一旦这个数字达到了，
在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

会产生两个生命周期 组件被激活和组件离开

读音：

Raw [rua] 【未经加工的】 【原始的】 【擦伤处】

shallow [xia no]