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属性，代表缓存组件或者页面最大数量。
一旦这个数字达到了，
在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
会产生两个生命周期 组件被激活和组件离开
