首页 > 其他分享 >不积跬步,无以至千里【7】【vue】

不积跬步,无以至千里【7】【vue】

时间:2022-12-27 16:12:25浏览次数:42  
标签:nextTick vue DOM 无以至千里 不积跬步 Vue 组件 节点

1. vue生命周期(父子组件)

 

 

 

2. computed/methods/watch的区别

● computed 计算属性 : 依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。

● watch 侦听器 : 更多的是观察的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。

● method 调用总会执行该函数

 

3. v-show和v-if的区别

4. v-if和v-for优先级

vue2.0版本中v-for优先于v-if被解析,如果同时出现,每次渲染都会先执行循环再判断条件,无论如何循环都不可避免,浪费了性能。

要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环。如果条件出现在循环内部,可通过计算属性提前过滤掉那些不需要显示的项

 

3.x 版本中 v-if 总是优先于 v-for 生效

 

5. v-for为什么要用key

key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更准确, 更快的找到对应的vnode节点

 

6. 组件通信

7. 插槽的使用

普通插槽、具名插槽、作用域插槽

8. nextTick的使用和原理

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。nextTick 的本质是为了利用 JavaScript 的异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

Vue采用了数据驱动视图的思想,但是在一些情况下,仍然需要操作DOM。有时候,可能遇到这样的情况,DOM1的数据发生了变化,而DOM2需要从DOM1中获取数据,那这时就会发现DOM2的视图并没有更新,这时就需要用到了nextTick了。由于Vue的DOM操作是异步的,所以,在上面的情况中,就要将DOM2获取数据的操作写在$nextTick中

在以下情况下,会用到nextTick:
● 在数据变化后执行的某个操作,而这个操作需要使用随数据变化而变化的DOM结构的时候,这个操作就需要方法在nextTick()的回调函数中。
● 在vue生命周期中,如果在created()钩子进行DOM操作,也一定要放在nextTick()的回调函数中。因为在created()钩子函数中,页面的DOM还未渲染,这时候也没办法操作DOM,所以,此时如果想要操作DOM,必须将操作的代码放在nextTick()的回调函数中。

9. 常用的指令

10. scoped的作用

11. 常用的修饰符

12. keep-alive的作用?keep-alive中的生命周期钩子

keep-alive是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件不会被真正销毁。
当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated钩子函数。

 

13. vue如何监听对象或者数组属性的变化

------------

1. 说说你对vue的理解?

2. v-model的实现原理

3. 双向数据绑定的原理

 

4. MVVM和MVC的区别?

5. 虚拟DOM和diff算法

虚拟DOM就是用来描述真实DOM的javaScript对象,可以将多次修改的DOM一次性渲染到页面上,减少页面的重排重绘,提高渲染性能。 在代码渲染到页面之前,vue会把代码转换成一个对象(虚拟 DOM)。在每次数据发生变化前,虚拟DOM都会缓存一份,变化之时,现在的虚拟DOM会与缓存的虚拟DOM进行比较。在vue内部封装了diff算法,通过这个算法来进行比较,渲染时修改改变的变化,原先没有发生改变的通过原先的数据进行渲染。

 

DIFF算法的原理:
● 首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则删除该节点重新创建节点进行替换
● 如果为相同节点,进行patchVnode,判断如何对该节点的子节点进行处理,先判断一方有子节点一方没有子节点的情况(如果新的没有子节点,将旧的子节点移除)
● 比较如果都有子节点,则进行updateChildren,判断如何对这些新老节点的子节点进行操作(diff核心)。
● 匹配时,找到相同的子节点,递归比较子节点
● 更新差异,复用节点

-------------

1. Proxy和defineProperty的区别

a、defineProperty:
Vue 在实例初始化时遍历 data 中的所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这样当追踪数据发生变化时,setter 会被自动调用。
存在的问题:
1. 添加或删除对象的属性时,Vue 检测不到。因为添加或删除的对象没有在初始化进行响应式处理,只能通过$set 来调用Object.defineProperty()处理。
2. 无法监控到数组下标和长度的变化。

 

b、proxy

Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能,其作用为:用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)

 

c、defineProperty和proxy的区别

1. Proxy 直接代理整个对象而非对象属性,这样只需做一层代理就可以监听同级结构下的所有属性变化,包括新增属性和删除属性。
2. Proxy 可以监听数组的变化。

 

2. Vue3.0为什么要使用proxy

在 Vue2 中, 0bject.defineProperty 会改变原始数据,而 Proxy 是创建对象的虚拟表示,并提供 set 、get 和 deleteProperty 等处理器,这些处理器可在访问或修改原始对象上的属性时进行拦截,有以下特点∶
● 不需用使用 Vue.$set 或 Vue.$delete 触发响应式。
● 全方位的数组变化检测,消除了Vue2 无效的边界情况。
● 支持 Map,Set,WeakMap 和 WeakSet。


Proxy 实现的响应式原理与 Vue2的实现原理相同,实现方式大同小异∶
● get 收集依赖
● set、delete 等触发依赖
● 对于集合类型,就是对集合对象的方法做一层包装:原方法执行后执行依赖相关的收集或触发逻辑。

 

3. Composition API

Vue3 中,舍弃了 Options API,转而投向 Composition API。Composition API本质上是将 Options API 背后的机制暴露给用户直接使用,这样用户就拥有了更多的灵活性,也使得 Vue3 更适合于 TypeScript 结合。

Vue Composition API 使得 Vue3 的开发风格更接近于原生 JavaScript,带给开发者更多地灵活性

 

 

---------------

1. hash和history模式的区别?

2. SPA单页面应用的优缺点

3. params和query传递参数的区别

4. 路由钩子函数/路由守卫 

全局守卫(前置/后置):beforeEach、beforeResolve、afterEach
路由独享的守卫:beforeEnter
组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

 

5. 路由懒加载

a、箭头函数+import

 

 

b、箭头函数+ resolve

 

 

 

6. router和route的区别

7. 编程式导航和声明式导航

--------------------

1. vuex的作用?

专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应 用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方 式,且适用于任意组件间通信

 

 

2. state/mutation/action/getter/module的作用

actions
由子组件this.$store.dispatch('actions名',传递的数据)触发
actions: { action名({commit},数据){...}}


mutations
由actions中的commit('mutations名',传递的数据)触发
mutations:{mutations名(state,数据){...}}


state
存储数据:state:{userInfor:{}}


getters
计算state中的数据:getters:{getters名(state){...}}

 

modules => 模块化Vuex

 

3. mutation和action的区别?

mutations:
mutation中的操作是一系列的同步函数,用于修改state中的变量的的状态。当使用vuex时需要通过commit来提交需要操作的内容。

actions:
Action 可以包含任意异步操作,Action 提交的是 mutation,而不是直接变更状态。

区别:
Mutation专注于修改State,理论上是修改State的唯一途径;Action业务代码、异步请求。
Mutation:必须同步执行;Action:可以异步,但不能直接操作State。
在视图更新时,先触发actions,actions再触发mutations

标签:nextTick,vue,DOM,无以至千里,不积跬步,Vue,组件,节点
From: https://www.cnblogs.com/gs-top/p/16953058.html

相关文章

  • vue3传值
    https://blog.csdn.net/H_114/article/details/122420402?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERat......
  • Vue :一种简单的前端分辨率适配和echarts适配方案
    一、背景对前端不甚了解,对分辨率适配一窍不通,奈何不得不用。文章中的分辨率适配原理我可能说不太明白,但会写出清晰可行的操作步骤。二、核心代码分辨率适配用到了rem、......
  • 【Vue 中 Axios 的封装和 API 接口的管理】
    一.封装各模块作用引入一般我会在项目的src目录中,新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理......
  • 【Vue2.0与Vue3.0区别总结】
    vue2.0和vue3.0区别结构部分程序主入口文件main.jsvue2.0vue3.0-暴露出createApp方法组件语法部分(vue3.0主要针对api的优化,vue3.0兼容vue2.0写法)vue3.0使用​​组......
  • H5跳转微信小程序-成功案例(VUE)(踩坑无数)
    H5跳转微信小程序-成功案例(VUE)(踩坑无数)TuoMei已于2022-07-2909:52:22修改准备工作根据官方提供的资料需准备以下几点:1、已认证的服务号2、绑定JS接口安全域名......
  • Vue3之watch
     watch监视ref函数<template><h2>当前求和为:{{sum}}</h2><button@click="sum++">点我+1</button><hr><h2>当前的信息为:{{msg}}</h2><button......
  • Vue按需引入注册UI以及自定义组件的封装
    1.单文件global注册自定义组件的封装importAfrom"../view/A.vue";importBfrom"../view/B.vue";constcomponents={A,B};exportdefault{install(Vue){......
  • Vue笔记
    watch和watchEffect的区别简述watchEffect不需要指定监听的属性,自动收集依赖,只要在回调中引用到了响应式的属性,只要这些属性发生改变,回调就会执行。watch可以获取到新......
  • Vue3之computed计算属性
    计算属性  computed函数与Vue2.x中computed配置功能一致写法<template><h1>一个人的信息</h1>姓:<inputtype="text"v-model="person.firstName">......
  • Vue技术5.Vue中的MVVM
    <!DOCTYPEhtml><html><head><matacharset="UTF-8"/><title>理解MVVM</title><!--引入Vue--><scripttype="text/javascript"src......