Vue3【1.v |
您所在的位置：网站首页 › layui渲染页面元素 › Vue3【1.v |
|
文章目录
1.v-if 和 v-show2.动态组件3.网页的渲染4.v-for4.1 v-for 与对象4.2 在 v-for 里使用范围值4.3 v-for 与 v-if4.4 通过 key 管理状态
4.5 组件上使用 v-for
1.v-if 和 v-show
v-show 可以根据值来决定元素是否显示（通过display来切换元素的显示状态） v-if 可以根据表达式的值来决定是否显示元素（会直接将元素删除） v-show通过css来切换组件的显示与否，切换时不会涉及到组件的重新渲染切换的性能比较高。 但是初始化时，需要对所有组件进行初始化（即使组件暂时不显示） 所以它的初始化的性能要差一些！ v-if通过删除添加元素的方式来切换元素的显示，切换时反复的渲染组件，切换的性能比较差。 v-if只会初始化需要用到的组件，所以它的初始化性能比较好v-if可以和 v-else-if 和 v-else结合使用v-if可以配合template使用 import { ref } from "vue" const isShow = ref(true) App组件 切换 我是一个h2 我是h3 2.动态组件component 是一个动态组件 component最终以什么标签呈现由is属性决定 import { ref } from "vue" import A from "./components/A.vue" import B from "./components/B.vue" const isShow = ref(true) 切换 3.网页的渲染浏览器在渲染页面时，做了那些事： 加载页面的html和css（源码）html转换为DOM，css转换为CSSOM将DOM和CSSOM构建成一课渲染树对渲染树进行reflow（回流、重排）（计算元素的位置）对网页进行绘制repaint（重绘）渲染树（Render Tree） 从根元素开始检查那些元素可见，以及他们的样式忽略那些不可见的元素（display:none）重排、回流 计算渲染树中元素的大小和位置当页面中的元素的大小或位置发生变化时，便会触发页面的重排（回流）width、height、margin、font-size …注意：每次修改这类样式都会触发一次重排！所以如果分词修改多个样式会触发重排多次，而重排是非常耗费系统资源的操作（昂贵），重排次数过多后，会导致网页的显示性能变差，在开发时我们应该尽量的减少重排的次数在现代的前端框架中，这些东西都已经被框架优化过了！所以使用vue、react这些框架这些框架开发时，几乎不需要考虑这些问题，唯独需要注意的时，尽量减少在框架中直接操作DOM重绘 绘制页面当页面发生变化时，浏览器就会对页面进行重新的绘制例子： DOCTYPE html> Document .box1 { width: 200px; height: 200px; background-color: orange; } .box2 { background-color: tomato; } .box3 { width: 300px; height: 400px; font-size: 20px; } 点我一下 btn.onclick = () => { // box1.classList.add("box2") // 可以通过修改class来间接的影响样式，来减少重排的次数 //修改一次 // box1.style.width = "300px" // box1.style.height = "400px" // box1.style.fontSize = "20px" // box1.classList.add("box3") //修改两次 ，none和block修改，none之后不修改 // box1.style.display = "none" // box1.style.width = "300px" // box1.style.height = "400px" // box1.style.fontSize = "20px" // div.style.display = "block" } 4.v-for我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名： const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] } } {{ item.message }}在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。 const parentMessage = ref('Parent') const items = ref([{ message: 'Foo' }, { message: 'Bar' }]) data() { return { parentMessage: 'Parent', items: [{ message: 'Foo' }, { message: 'Bar' }] } } {{ parentMessage }} - {{ index }} - {{ item.message }}对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域： {{ item.message }} {{ childItem }}你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法： 4.1 v-for 与对象你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。 const myObject = reactive({ title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10' }) {{ value }}可以通过提供第二个参数表示属性名 (例如 key)： {{ key }}: {{ value }}第三个参数表示位置索引： {{ index }}. {{ key }}: {{ value }} 0.title: How to do lists in Vue 1.author: Jane Doe 2.publishedAt: 2016-04-10 4.2 在 v-for 里使用范围值v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。 {{ n }}注意此处 n 的初值是从 1 开始而非 0。 4.3 v-for 与 v-if:::warning 注意 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。 ::: 当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名： {{ todo.name }}在外新包装一层 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)： {{ todo.name }} 4.4 通过 key 管理状态Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。 默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。 为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute： 当你使用 时，key 应该被放置在这个 容器上： {{ todo.name }}:::tip 注意 key 在这里是一个通过 v-bind 绑定的特殊 attribute。请不要和[在 v-for 中使用对象里所提到的对象属性名相混淆。 ::: 推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。 key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。 import { ref } from "vue" const arr = ref(["孙悟空", "猪八戒", "沙和尚", "唐僧"]) const arr2 = ref([ { id: 1, name: "孙悟空", age: 18 }, { id: 2, name: "猪八戒", age: 28 }, { id: 3, name: "沙和尚", age: 38 } ]) 点我一下 点我一下2 {{ name }} {{ index }} - {{ name }} {{ obj.name }} -- {{ obj.age }} { obj.name }} -- {{ obj.age }} --> {{ name }} -- {{ age }} 4.5 组件上使用 v-for我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)： 但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props： 不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |