toRaw：
- 作用：将一个由reactive生成的响应式对象转为普通对象。
- 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。提高页面性能。
markRaw：
- 作用：标记一个对象，使其永远不会再成为响应式对象。
- 应用场景:
  1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
  2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

toRaw 基本使用

<script>
import { reactive, toRefs, ref, toRaw, markRaw } from "vue";
export default {name: "Demo",setup() {let obj = { name: "zs", age: 19 };/*ref/reactive数据类型的特点:每次修改都会被追踪,都会更新UI界面,但是这样其实是非常消耗性能的所以如果我们有一些操作不需要追踪,不需要更新UI界面,那么这个时候,我们就可以通过toRaw方法拿到它的原始数据,对原始数据进行修改这样就不会被追踪,这样就不会更新UI界面,这样性能就有提高了*/let state = reactive(obj);let obj2 = toRaw(state); //toRaw作用是获取原始数据//这里 如果获取的是ref的类型的值 则toRaw则要加上.value 才能获取到正确的值  如let a = { name: "aa", age: 19 };let b = ref(a);let c = toRaw(b.value); // 这样才可以获取到正确的值  c === a trueconsole.log(obj === obj2); //trueconsole.log(obj === state); //false/* state和obj的关系:引用关系, state的本质是一个Proxy对象,在这个Proxy对象中引用了obj 所以 如果修改了obj的name的值 state里面的值也改变了在组合API中 如果想定义方法不用定义到methods里直接定义就能用(但是要暴露出去)*/function myFn() {//如果直接修改obj那么是无法触发界面更新的//只有通过包装之后的对象来修改,才会出发界面的更新 也就是只有修改state页面才会更新渲染obj.name = "ls"; //页面不会更新 虽然数据变化了console.log(obj);   // {name:'ls'}console.log(state); // {name:'ls'}}//注意点://组合API中定义的变量/方法,要想在外面使用 必须通过return {xxx,xxx}暴露出去return { count, state, myFn };},
};
</script>

markRaw() 基本使用

<template><h2>姓名: {{ name }}</h2><h2>年龄: {{ age }}</h2><h2>薪资: {{ job.j1.salary }} k</h2><h2 v-show="person.car">座驾信息: {{ person.car }}</h2><button @click="name += '~'">修改姓名</button><button @click="age++">修改年龄</button><button @click="job.j1.salary++">修改薪资</button><hr /><button @click="addCar">给人添加一台车</button><button v-show="person.car" @click="person.car.name += '!'">换车名</button><button v-show="person.car" @click="changePrice">换价格</button>
</template><script>
import { reactive, toRefs, ref, toRaw, markRaw } from "vue";
export default {name: "Demo",setup() {let person = reactive({name: "张三",age: 18,job: {j1: {salary: 20,},},});// markRaw函数使用function addCar() { // 往 person 中添加一个属性let car = { name: "奔驰", price: "40" };// 默认在person追加属性是响应式的！ proxy 可以捕获 person 这个响应式对象任何属性的任何一种操作。// 标记一个对象，使其永远不会再成为响应式对象。person.car = markRaw(car);}// 更改 person.car 信息,不会触发响应式 ;function changePrice() {//  数据是被修改的但是不会触发页面更新person.car.price++;console.log(person.car.price);}return {// toRefs() 只执行一次; 后期在person中添加的属性是不能拆分的！...toRefs(person),// 可以将整个响应式数据交出到页面渲染, 可以监听的属性的添加，实现页面的渲染！person,changePrice,addCar,};},
};
</script>

Day 13-其它 Composition API_toRaw 与 markRaw相关推荐

Javascript 面向对象编程
Javascript是一个类C的语言,他的面向对象的东西相对于C++/Java比较奇怪,但是其的确相当的强大,在 Todd 同学的"对象的消息模型"一文中我们已经可以看到一些端倪了 ...
mahout安装测试
Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目,提供一些可扩展的机器学习领域经典算法的实现,旨在帮助开发人员更加方便快捷地创建智能应用程序.Apa ...
UWP Composition API - RadialMenu
原文:UWP Composition API - RadialMenu 用Windows 8.1的童鞋应该知道OneNote里面有一个RadialMenu.如下图,下图是WIn10应用Drawboar ...
UNREAL ENGINE 4.13 正式发布！
这次的版本带来了数百个虚幻引擎 4 的更新,包括来自 GitHub 的社区成员们提交的 145 个改进!感谢所有为虚幻引擎 4 添砖加瓦贡献的人们: alk3ovation, Allegorithmi ...
asp 退出登录修改cookie能进入后台_Vue3.0 - Composition API 体验版开发后台管理系统...
手把手撸码前端,实战大公司级后台管理系统开发,正规实践了解项目开发整体流程由0到1搭建后台管理系统,采用 Vue3.0 - Composition API 体验版开发,优先体验3.0 API 语法: ...
UWP Composition API - GroupListView（二）
还是先上效果图: 看完了上一篇UWP Composition API - GroupListView(一)的童鞋会问,这不是跟上一篇一样的吗??? 骗点击的?? No,No,其实相对上一个有更简单粗暴 ...
java集合替换集合_Java集合–您必须知道的13件事
java集合替换集合 Java Collections Framework is one of the core parts of the Java programming language. Col ...
Internal Error: Lookup sub table, 'ccmp' Glyph Composition/Decomposition in Arabic lookup 10 context
import subprocesssubprocess.call('""D:\\pdf2htmlEX\\pdf2htmlEX.exe"" --dest-dir ...
移动应用ui设计模式pdf_移动ui了解应用ui设计的13种基本模式
移动应用ui设计模式pdf 重点 (Top highlight) Welcome to the world of numerous apps for every occasion. Thanks to ...

Day 13-其它 Composition API_toRaw 与 markRaw

toRaw 基本使用

markRaw() 基本使用

Day 13-其它 Composition API_toRaw 与 markRaw相关推荐

最新文章

热门文章