Vue.js 比较重要知识点总结三

最新推荐文章于 2024-10-05 02:10:11 发布
最新推荐文章于 2024-10-05 02:10:11 发布
阅读量695 收藏 1
点赞数
分类专栏： 前端杂货铺 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BradenHan/article/details/131039578
版权

概述

  • Vue 中 nextTick 的实现原理
  • v-if 和 v-show 的区别
  • Vue 中的 key 有什么作用
  • 如何理解ref toRef和toRefs
  • Composition API如何实现代码逻辑复用？

Vue 中 nextTick 的实现原理

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})

// 作为一个  Promise 使用   (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
.then(function () {
// DOM 更新了
})

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。

请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE)，你得自己提供 polyfill。

更多精彩内容，请微信搜索“前端爱好者“， 戳我 查看 。

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。

只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。

然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then 、 MutationObserver 和 setImmediate ，如果执行环境不支持，则会采用setTimeout(fn, 0) 代替。

例如，当你设置 vm.someData = ‘new value’ ，该组件不会立即重新渲染。

当刷新队列时，组件会在下一个事件循环“tick”中更新。

多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数将在 DOM 更新完成后被调用。

案例

例如：

<div id="example">{{message}}</div>

var vm = new Vue({
el: '#example',
    data: {
     message: '123'
    }
})

vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false

Vue.nextTick(function () {
    vm.$el.textContent === 'new message' // true
})

在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue ，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上：

Vue.component( 'example', {
    template: '<span>{{ message }}</span>',
    data: function () {
        return {
            message: '未更新 '
        }
    },
    methods: {
        updateMessage: function () {
            this.message = '已更新 '
            console.log(this.$el.textContent) // => '未更新 '
            this.$nextTick(function () {
                console.log(this.$el.textContent) // => '已更新 '
            })
        }
    }
})

因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2017 async/await 语法完成相同 的事情：

methods: {
    updateMessage: async function () {
        this.message = '已更新 '
        console.log(this.$el.textContent) // => '未更新 '
        await this.$nextTick()
        console.log(this.$el.textContent) // => '已更新 '
    }
}

总结：

nextTick 方法主要是使用了宏任务和微任务，定义了一个异步方法，多次调用 nextTick 方法会将方法存 入队列中，通过这个异步方法清空当前队列。所以这个 nextTick 方法就是异步方法。

v-if 和 v-show 的区别

v-if 是“真正” 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和 重建。

  • true：渲染
  • false：销毁不渲染，元素就不存在了

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做 ——直到条件第一次变为真时，才会开 始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

  • true：display: block
  • false: display: none

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地 切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

特别注意

在 vue2 中 v-for 的优先级更高，但是在 vue3 中优先级改变了。v-if 的优先级更高。

在 vue2 中 v-for 和 v-if 同时出现时，可放在一个标签内，如下写法：

<div v-for="item in ss" v-if="item.show" :key="item.id">
 {{ item.show }}
</div>
 
 data(){
    return {
        ss:[
        { id: 1, show: true, name: '1' },
        { id: 2, show: false, name: '2' },
        { id: 3, show: true, name: '3' },
        ]
    }
 }

在 vue3 中这样写会报错，就是因为 v-if 的优先级更高，所以 item.show 是未定义报错了。

Vue 中的 key 有什么作用

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。

Vue 的 diff 过程可以概括为：

oldCh 和 newCh 各有两个头尾的变量 oldStartIndex 、oldEndIndex 和 newStartIndex 、newEndIndex，它们会新节点和旧节点会进行两两对比，即一共有4种比较方式：

  • newStartIndex 和oldStartIndex
  • newEndIndex 和 oldEndIndex
  • newStartIndex 和 oldEndIndex
  • newEndIndex 和 oldStartIndex，

如果以上 4 种比较都没匹配

如果设置了key，就会用 key 再进行比较，在比较的过程中，遍历会往中间靠，一旦 StartIdx > EndIdx 表明 oldCh 和 newCh 至少有一个已经遍历完了，就会结束比较。

具体有无 key 的 diff 过程，可以查看作者写的另一篇详解虚拟 DOM 的文 章《深入剖析：Vue核心之虚拟DOM》

所以 Vue 中 key 的作用是：

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以 更准确、更快速

更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地 复用的情况。所以会更加准确。
更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快，源码如下：

function createKeyToOldIdx (children, beginIdx, endIdx) {
    let i, key
    const map = {}
    for (i = beginIdx; i <= endIdx; ++i) {
        key = children[i].key
        if (isDef(key)) map[key] = i
    }
    return map
}

如何理解ref toRef和toRefs

ref

  1. 生成值类型的响应式数据
  2. 可用于模板和reactive
  3. 通过.value修改值
<template>
	<div>{{ ageRef }}</div>
</template>

<script>
import { ref } from 'vue'
export default {
	setup() {
		const ageRef = ref(20)

		setInterval(() => {
			ageRef.value += 1
		}, 1000)
		
		return {
			ageRef
		}
	},
}
</script>

toRef

  1. 针对一个响应式对象（reactive封装）的prop
  2. 创建一个ref，具有响应式
  3. 两者保持引用关系
<template>
	<div>{{ state.age }} --- {{ ageRef }}</div>
</template>

<script>
import { toRef, reactive } from 'vue'
export default {
	setup() {
		const state = reactive({
			name: 'JL',
			age: 18
		})
		const ageRef = toRef(state, 'age')
		setTimeout(() => {
			state.age = 20
		}, 1000)
		
		setTimeout(() => {
			ageRef.value = 21
		}, 2000)
		
		return {
			state,
			ageRef
		}
	},
}
</script>

使用toRef将state的age属性变成一个响应式变量，然后在1秒后将state的age值变为20，此时ageRef也会变成20；在2秒后将ageRef的值变为21，此时state的age值也会变成21，说明了两者保持相互引用关系

toRef针对的是响应式，针对的不是普通对象，如果用于非响应式，产出的结果不具有响应式

toRefs，避免模板中导出都是state

  1. 将响应式对象（reactive封装）转换成普通对象
  2. 对象的每个prop都是对应的ref
  3. 两者保持引用关系
<template>
	<div>{{ name }}---{{ age }}</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
	setup() {
		const state = reactive({
			name: 'JL',
			age: 18
		})

		const stateRefs = toRefs(state)

		setTimeout(() => {
			state.age = 20
		}, 1000)

		setTimeout(() => {
			stateRefs.age.value = 21
		}, 2000)

		return stateRefs
	},
}
</script>

使用toRefs将state转变成一个普通对象，这时候就可以直接返回stateRefs，这时候在template就可以直接调用name和age。

最佳使用方式

  1. 用reactive做对象的响应式，用ref做值类型的响应式
  2. setup中返回toRefs(state)，或者toRef(state, ‘prop’)
  3. ref的变量命名都用xxxRef
  4. 合成函数返回响应式对象时，用toRefs
<template>
	<div>x:{{x}} y:{{y}}</div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
	setup() {
		function test() {
			const state = reactive({
				x: 1,
				y: 2
			})
			return toRefs(state)
		}
		const {x, y} = test()

		setTimeout(() => {
			x.value = 2
		}, 1000)

		return {
			x,
			y
		}
	}
}
</script>

上面的代码，test函数中定义了响应式对象state，并通过toRefs将其转为普通对象并返回，这时候可以结构赋值，并且值是响应式的

Composition API如何实现代码逻辑复用？

  1. 抽离逻辑代码到一个函数
  2. 函数命名约定为useXXX格式（React Hooks也是）
  3. 在setup中引用useXXX函数

案例：获取当前鼠标位置的方法

第一种，直接使用ref定义的useMousePosition–这种方式，导出和导入都可以随意解构

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'
 
// 1. 定义一个函数,抽离逻辑，命名使用 useXXX
function useMousePosition() {
  // 使用ref定义
  const x = ref(0)
  const y = ref(0)
 
  function update(e) {
    console.log(x.value, y.value);
 
    x.value = e.pageX
    y.value = e.pageY
  }
 
  onMounted(() => {
    console.log('开始监听鼠标划动事件');
    window.addEventListener('mousemove', update)
  })
 
  onUnmounted(() => {
    console.log('解除监听鼠标划动事件');
    window.removeEventListener('mousemove', update)
  })

  return {
    x, 
    y
  }
}
 
 
// 导出这个函数
export default useMousePosition

调用

<!-- 在任意一个组件,都可以调用这个方法 -->
 
<template>
  <p>mouse position: {{x}}, {{y}}</p>
</template>
 
<script>
import useMousePosition from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // useMousePosition是使用ref定义变量的,这种可以解构
    const { x, y } = useMousePosition()
    console.log(x, y)
    return {
      x, y
    }
  }
}
</script>

第二种，使用reactive定义鼠标坐标对象 这种导出的方式，在组件中导入时是不能解构的

// useMousePosition.js'
import {  onMounted, onUnmounted, reactive } from 'vue'
 
export function useMousePosition2() {
  // 使用reactive定义
  const mouse = reactive({
    x: 0, 
    y: 0
  })
 
  function update(e) {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }
 
  onMounted(() => {
    console.log('开始监听鼠标划动事件');
    window.addEventListener('mousemove', update)
  })
 
  onUnmounted(() => {
    console.log('解除监听鼠标划动事件');
    window.removeEventListener('mousemove', update)
  })
 
  return {
    mouse
  }
}

<template>
  <!-- 使用对象方式显示信息 -->
  <p>mouse position2: {{mouse.x}}, {{mouse.y}}</p>
</template>
<script>
import { useMousePosition2 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // useMousePosition2是使用reactive定义的,这种不可以解构
    const { mouse } = useMousePosition2()
    return {
      mouse
    }
  }
}
</script>

第三种，使用toRefs 使用这种方式，可以将reactive对象，解构为ref对象

export function useMousePosition3() {
  // 使用reactive定义
  const mouse = reactive({
    x: 0, 
    y: 0
  })
 
  function update(e) {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }
 
  onMounted(() => {
    console.log('开始监听鼠标划动事件');
    window.addEventListener('mousemove', update)
  })
 
  onUnmounted(() => {
    console.log('解除监听鼠标划动事件');
    window.removeEventListener('mousemove', update)
  })
  
  // 这里，使用toRefs解构成ref对象
  return toRefs(mouse)
}

调用

<template>
  <p>mouse position: {{x}}, {{y}}</p>
</template>
 
<script>
import { useMousePosition3 } from './useMousePosition'
export default {
  name: 'MousePosition', 
  setup() {
    // 使用reactive定义鼠标坐标对象，然后通过toRefs将其解构成ref对象
    const { x, y } = useMousePosition()
    console.log(x, y)
    return {
      x, y
    }
  }
}
</script>

三种方式都可以实现，但是我们一般使用时，都会返回ref对象，所以比较建议使用第一种和第三种，尽量不使用第二种

参考地址：

  • https://tangjiusheng.com/web/4935.html
  • https://blog.csdn.net/weixin_41759744/article/details/125305021
  • https://www.qetool.com/scripts/view/27412.html
前端布道人
关注
专栏目录
JavaScript进阶（十九）：ES6 对象解构
IT全栈 华强工作室
05-25 5221
文章目录一、前言使用解构从对象中获取值使用解构从嵌套对象中获取值使用对象解构定义一个新变量以及默认值使用 JavaScript 对象解构别名使用对象解构处理动态名称属性在函数参数和返回值中解构对象解构函数对象返回值在循环中使用对象解构二、三、四、延伸阅读 一、前言 使用解构从对象中获取值 对象解构最基本的用法是从对象中检索属性键的值。 例如，我们定义了一个对象，他有两个属性：name和age。 const User = { name: 'No Silver Bullet', age: 18 } 传
Vue - 解构对象
A_bad_horse的专栏
03-05 1232
const obj = { // 对象的解构 name: 't1', age: 18, sex: 'male' } const { name, age, sex } = obj; const { name, sex, age } = obj; // 与顺序无关，只和名字相关 console.log(name); console.log(age); console.log(sex);
前端基础 - ES6新特性，vue2.x基础
weixin_42979858的博客
05-27 453
ES6 1、声明语法 1.1、let 1.1.2、let和var的区别 1、let有块作用域 2、let不能重复声明同名变量 3、let不存在变量提升 1.2、const 1、定义常量 2、解构表达式 2.1、数组解构 let arr=[1,2,3]; let [a,b,c]=arr; console.log(a,b,c); 2.2、对象解构 const person={ name:"chx" age:"24" } const {name,age}=person; console.log(name
Vue解构工作原理
qq_43192617的博客
04-22 725
解构（Destructuring）是一种在 JavaScript 中常用的技术，它允许我们从数组或对象中提取值并赋值给对应的变量。在 Vue.js 中，解构同样适用，并且可以极大地简化数据处理和提高代码可读性。在这个改进后的版本中，我们使用了计算属性（computed properties）和解构来从。：可以从一个对象中提取出特定的属性，并将它们的值赋给对应的变量。：可以从一个数组中提取出特定的元素，并将它们赋值给对应的变量。这使得我们的模板更加简洁，同时代码的可读性也得到了提高。
Vue3:使用解构赋值来读取对象里的键-值对（值也是对象）
无面人的博客
01-10 1563
Vue3:使用解构赋值来读取对象里的键-值对（值也是对象）
关于引入vue.js 文件的知识点总结
11-21
在本文中，我们将深入探讨如何在项目中引入Vue.js文件，并了解相关的关键知识点。Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。它的轻量级和可扩展性使其成为许多开发者的首选。以下是对引入Vue.js文件...
关于vue.js弹窗组件的知识点总结
12-28
vue 对于动画的处理相对简单，给组件加入css transition 动画即可 <!--省略其它内容--> [removed] // ... [removed] <style> .modal-scale-transition{ transition: transform,opa
Vue.js进阶知识点总结
10-18
通过学习和熟练运用这些进阶知识点，开发者可以更好地驾驭Vue.js，提高开发效率，编写出更加健壮和易于维护的前端应用。同时，对Vue生态中的其他工具如Webpack、Vue Router和Vuex的深入了解也是成为Vue.js大师的重要...
Vue.js知识点总结 (element框架混用 制作一个左树右表布局)
01-08
文章目录element框架混用一，安装二，引入使用找到文件并编辑使用（1）第一，加入name名作为组件导出的索引名，我们这里起名为ele（2）在App.vue下导出（3）运行（4）用CSS美化设计三，完成 >>> element框架混用 ...
解构赋值及其原理
m0_74359467的博客
04-02 1344
/注意变量必须为属性名解构成对象，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错。解构成数组，等号右边必须为可迭代对象。
ES6对象解构（Vue Ajax请求）
风吟Pro的博客
01-04 97
ES6发送Ajax data对象解构问题
Vue3超详细的ref()用法，看这一篇就够了
热门推荐
EchoLiner的博客
04-30 11万+
ref()接受一个内部值，返回一个响应式的可更改的ref 对象，此对象只有一个指向其内部值的属性.value。ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。
Vue3_对响应式对象解构赋值之后失去响应性——toRefs()
2201_75783276的博客
08-06 2161
在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用。1 当对一个响应式对象进行es6的解构赋值之后，它将失去响应性。可以看到点击修改name的时候，数据变了，但是页面却没有更新。2 可以使用vue的toRefs()方法，对对象进行解构。即可看到数据修改了以后，页面做出了响应。
vue,vue3 新手可能忽略的问题，解构对象丢失响应式，如props，torefs, pinia响应式核心
潜心
10-13 8937
这段时间在利用vue3开发一个项目，在vue的使用过程中，我处于用到什么学什么的状态，一方面是学业，一方面是技术，项目的影响，导致我一直没有静下心来研究透彻vue核心知识，这么，一个关于组件开发时响应式的问题面对了我，我做的是一个组件嵌套，分别有三个组件，一个负责页面框架，一个负责核心业务，一个负责文件处理，这三个组件需要互相通信，我为了代码简洁没有定义过多的变量，而是充分利用vue的组件通信来完成响应式组件和业务。
Vue3 中对象解构的巧妙运用
最新发布
m0_57836225的博客
10-05 395
对象解构是 ES6 引入的一种语法，它允许我们从对象中提取特定的属性，并将其赋值给变量。这样可以避免重复书写对象的属性名，使代码更加简洁。例如，假设有一个对象personage: 30,我们可以使用对象解构来提取name和age// John// 30在 Vue3 中，我们可以将对象解构应用于各种场景，如组件的选项对象、函数的参数等。对象解构是 Vue3 中一个非常有用的技巧，可以让我们的代码更加简洁、易读和高效。
Vue toRef抽取出来单个的ref， toRefs 解构，toRaw
丿灬安之若死
01-09 365
单独抽出某个遍历为Ref这样是不行的 必须为相应对象才行。
vue解构赋值_vue解构赋值_ES6解构赋值
weixin_42268494的博客
02-11 3039
写vue或react项目，我们经常在接收到数据的时候，需要对数据进行二次加工操作，一些传统的办法可以实现对数据的加工。但利用到ES6的解构赋值，则更为简单。解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们的赋值是这样的let arr = [1,2,3]let a= arr[0]let b= arr[1]let c= arr[2]这样写很繁琐，解构赋值可以轻松解决上面的问题。一、数...
vue3：Ref全家桶
大香蕉的博客
04-13 1104
ref 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。 非响应式： <template> <div> <span>{{ msg }}</span> <el-button @click="handleChangeMSG">change msg</el-button> </div> </template> &l
vue 后端返回的json 对象 解构赋值 给定义的 data对象记录
tang_jian_dong的博客
06-23 8798
定义了一个sjForm对象 后端返回的json对象： 也可以下面这样 这是个es6里面的方法，比较简单，就是Object.assign，如下图，再修改data对象里面的数据，response.data.data就不会改变。Object.assign只试用于response.data.data对象里面非对象的数据，如果是对象，也会改变。 转载:https:...
Vue.js源码压缩工具vue.min.js使用指南
Vue.js 源码压缩程序的详细知识点: 1. Vue.js 基础概念: - Vue.js 是一个渐进式JavaScript框架，它允许开发者逐步地采用Vue来增强他们现有的网页或项目。 - 它的设计理念是通过尽可能简单的API提供数据驱动的视图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端布道人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值