前端面试题记忆——Vue

最新推荐文章于 2024-09-04 13:51:32 发布
最新推荐文章于 2024-09-04 13:51:32 发布
阅读量670 收藏 4
点赞数 1
分类专栏： 面试题 文章标签： vue
原文链接：https://blog.csdn.net/WSZFSNFK/article/details/122376695#comments_20623150
版权

vue部分

1、优点

  • 轻量级、速度快、简单易学
  • 低耦合、可重用性、独立开发
  • 文档齐全，且文档为中文文档

2、vue父组件向子组件传递数据

  • props

3、子组件向父组件传递事件

  • $emit

4、v-show和v-if指令得共同点和不同点

  • 相同点：都可以控制dom元素得显示和隐藏
  • 不同点
    • v-show 改变display属性，dom元素并未消失，切换时不需要重新渲染页面
    • v-if直接将dom元素从页面删除，再次切换需要重新渲染页面

5、让CSS只在当前组件中起作用

  • scoped

6、得作用

  • 主要是用于需要频繁切换得组件时进行缓存，不需要重新渲染页面

7、如何获取dom

  • 给dom元素加ref=‘refname’，然后通过this.$refs.refname进行获取dom元素

8、vue当中得指令和它得用法

  • v-model：实现表单控件和数据的双向绑定
  • v-on：绑定事件的监听器
  • v-html：绑定一些包含html代码的数据在视图上
  • v-text：用于更新标签包含的文本
  • v-if: 控制元素是否需要被渲染
  • v-show：显示和隐藏

9、vue-loader是什么？用途是？

  • vue文件的一个加载器，将template/js/style转化为js模块
  • 用途：js可以写es6、style样式

10、为什么用key

  • 给每个dom元素加上key作为唯一标识，diff算法可以正确的识别这个节点，使页面渲染更加迅速

11、axios及安装

  • vue项目中使用ajax时需要axios插件
  • 下载方式 cnpm install axios --save

12、v-model的使用

  • v-model用于表单的双向绑定，可以实时修改数据

13、vue.cli项目中src目录每个文件夹和文件的用法

  • components存放组件
  • app.vue主页面入口
  • index.js主文件入口
  • ass存放静态资源文件

14、computed和watch的使用场景

  • 所以需要用到计算的都应该使用计算属性。多条数据影响一条数据时使用计算属性，使用场景：购物车
  • 如果是一条数据更改，影响多条数据时，使用watch，使用场景：搜索框

15、v-on可以监听多个方法？

  • 可以，比如 v-on =“onclick，onbure”

16、$nextTick的使用

  • 在data()中的修改后，页面中无法获取data修改后的数据，使用$nextTick时，当data中的数据修改后，可以实时的渲染页面

17、vue组件中data为什么必须是一个函数

  • 因为js的特性所导致，在component中，data必须以函数的形式存在，不可以是对象
  • 组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，他们只负责各自维护数据，不会造成混乱。

18、渐进式框架的理解

  • 主张最少
  • 可以根据不同的需求选择不同的层级

19、vue在双向数据绑定式的实现

  • 通过数据劫持、组合、发布订阅模式的方式来实现的，也就是说数据和视图同步
  • 核心：Object.defineProperty()方法

20、单页面应用和多页面应用区别及缺点

  • 单页面应用（SPA）：所有页面内容都包含在这个主页面中，写的时候分开写，然后再加护的时候有路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多用于PC端
  • 多页面（MPA）：一个应用中有多个页面，页面跳转时是整页刷新
  • SPA优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点对服务器压力较小
  • SPA缺点：不利于SEO；导航不可用，初次加载时耗时多；页面复杂度提高很多

21、vue项目中为什么要在列表组件中写key，其作用是？

key是给每一个vnode的唯一id，可以依靠key，更准确，更快的拿到oldVnode中对应的vnode节点

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

22、父组件和子组件生命周期钩子执行顺序

  • 加载渲染过程
    父beforeCreate——>父created——>父beforeMount——>子beforeCreate——>子created——>子beforeMount——>子mounted——>父mounted
  • 子组件更新过程
    父beforeUpdate ——>子beforeUpdate——>子updated——>父updated
  • 父组件更新过程
    父beforeUpdate——>父updated
  • 销毁过程
    父beforeDestroy——> 子beforeDestroy——>子destroyed——>父destroyed

23、nextTick的理解

当修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后再获取，才能成功

24、vue组件中data为什么必须是一个函数

再component中，data必须以函数的形式存在，不可以是对象。组建中的data写出一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。

25、vue和jQuery的区别

  • jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以方便的选取和操作DOM对象，而数据和界面是在一起的
  • Vue是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，通过Vue对象这个vm实现相互的绑定，即MVVM

26、delete和Vue.delete删除数组的区别

  • delete只是被删除的元素变成了empty/undefined其他元素的键值还是不变
  • Vue.delete 直接删除了数组，改变了数组的键值

27、SPA首屏加载慢如何解决

安装动态懒加载所需插件；使用CDN资源。

28、vue项目是打包了一个js文件，一个css文件，还是多个？

根据vue-cli脚手架规范，一个js文件，一个cs文件

29、vue更新数组时触发视图更新的方法

push(); pop(); shift(); unshift(); splice(); sort(); reverse()

30、vue生命周期及其作用

  • 实例从创建到销毁的过程
    • 创建、初始化数据、编译模板、挂载DOM，渲染更新、渲染卸载等一系列过程
  • 作用：生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑

31、第一次页面加载会触发哪几个钩子

  • beforeCreate、created、beforeMount、mounted

32、vue获取数据一般在哪个周期函数

  • created、beforeMount、mounted

33、created和mounted的区别

  • created：在模板渲染成html前调用，在初始化某些属性值，然后再渲染成视图
  • mounted：在模板渲染成html后调用，在初始化页面完成后，再对html的dom节点进行一些需要的操作

34、vue生命周期的理解

  • 初建前/后：在beforeCreated阶段，vue实例的挂载元素 e l 和 数 据 对 象 d a t a 都 为 u n d e f i n e d ， 还 未 初 始 化 。 在 c r e a t e d 阶 段 ， v u e 实 例 的 数 据 对 象 d a t a 有 了 ， el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了， el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有
  • 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，单还是挂载之前为虚拟dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染
  • 更新前/后：当data变化时，会触发beforeUpdate和updated方法
  • 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经接触了事件监听以及和dom的绑定，但dom结构依然存在

35、vuex是什么？

  • vue框架中状态管理

36、vuex有哪几种属性？

State：基本数据（数据源存放地）
Getters：从基本数据派生出来的数据
Mutations：提交更改数据的方法，同步！
Actions:像一个装饰器，包裹mutations，使之可以异步
Modules： 模块化Vuex

37、vue全家桶

vue-cli、vuex、vueRouter、Axios

38、vue-cli工程常用的npm命令？

  • npm install 下载node_modules资源包的命令
  • npm run dev启动 vue-cli开发环境的npm命令
  • npm run build vue-cli生成 生产环境部署资源文件大小的npm命令

39、vue-cli工程中每个文件夹和文件的用处

  • build文件架是保存一些webpack的初始化配置
  • config文件夹保存一些项目初始化的配置
  • node_modules是npm加载的项目依赖的模块
  • src目录是要来访的目录
    • assets 用来放置图片
    • components用来放组件文件
    • app.vue是项目入口文件
    • main.js项目的核心文件

40、v-if和v-show有什么区别

  • 共同点：都是动态显示DOM元素
  • 不同点：
    • v-if 是动态的向DOM树内添加或者删除DOM元素
    • v-show是通过设置DOM元素的display样式属性控制显隐
    • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部地事件监听和子组件
    • v-show只是简单地基于css切换
  • 性能消耗
    • v-if有更高地切换消耗
    • v-show有更高地初始渲染消耗
  • 使用场景
    • v-if适合运营条件不大可能改变
    • v-show适合频繁切换

41、v-if和v-for的优先级

v-for和v-if同时使用，有一个先后运行的优先级，v-for比v-if优先级更高，这就说明再v-for每次的循环赋值中每一次调用v-if的判断，所以不推荐v-if和v-for在同一标签中同时使用

42、vue常用的修饰符

事件修饰符

  • .stop阻止事件继续传播
  • .prevent阻止标签默认行为
  • .capture使用事件捕获模式，即元素自身触发的事件在此处处理，然后才交由内部元素进行处理
  • .self 只当在event.targe是当前元素自身时触发处理函数
  • .once事件只会触发一次
  • .passive告诉浏览器你不想阻止事件的默认行为

v-model的修饰符

  • .lazy通关这个修饰符，转变为在change事件再同步
  • .number自动将用户输入值转化为数值类型
  • .trim 自动过滤用户输入的收尾空格

键盘事件修饰符

  • .enter
  • .tab
  • .delete (捕获“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系统修饰符

  • .ctrl
  • .alt
  • .shift
  • .meta

鼠标按钮修饰符

  • .left
  • .right
  • .middle

43、vue事件中如何使用event对象

  • 获取事件对象，方法参数传递$event.
<button @click="Event($event)">事件对象</button>

44、组件传值方式

  1. 父传子：子组件通过props[‘xx’]来接收父组件传递的属性xx的值
  2. 子传父：子组件通过this.$emit(‘fnName’,value)来传递，父组件通过接收fnName事件方法来接收回调
  3. 其他方式：通过创建一个bus，进行传值
  4. 使用vuex

45、vue中子组件调用父组件的方法

  • 直接在子组件中通过this.$parant.event来调用父组件的方法
  • 在子组件里用$emit()向父组件触发一个事件，父组件监听这个事件就行了
  • 父组件把方法传入子组件中，在子组件里直接调用这个方法

46、让CSS只在当前组件中起作用

在组件中的style前面加上scoped

47、获取dom

ref = “domName” 用法：this.$refs.domName

48、vue路由跳转

  • （一）声明式导航router-link
    • 不带参数
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">  
<router-link :to="/home/:id">  
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>
  • 带参数
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">  
<router-link :to="/home/:id">  
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>
  • （二）this.$router.push()
    • 不带参数
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
  • query传参
1.路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
html取参: $route.query.id
script取参: this.$route.query.id
  • params传参
1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.获取参数
html取参:$route.params.id 
script取参:this.$route.params.id
  • 直接通过path传参
1.路由配置：
name: 'home',
path: '/home/:id'
2.跳转：
this.$router.push({path:'/home/123'}) 
或者：
this.$router.push('/home/123') 
3.获取参数：
this.$route.params.id
  • params和query的区别
    query类似get，跳转之后页面url后面会拼接参数，类似？id=1.非重要性的可以这样传，密码之类还是用params，刷新页面id还在。params类似post，跳转之后页面url后面不会拼接参数
    -（三）this.$router.replace()
  • 用法同上
    -（四）this.$router.go(n)
  • 向前或者向后跳转n个页面，n可为正整数或负整数
  • 区别：
    • this.$router.push
      跳转到指定url路径，并在history栈中添加一个记录，点击后退会返回到上一个页面
    • this.$router.replace
      跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面（即直接替换了当前页面）
    • this.$router.go(n)
      向前或者向后跳转n个页面，n可为正整数或负整数

    49、vue.js双向绑定的原理

    • vue.js2.0采用数据劫持（Proxy模式）结合发布者-订阅者模式（PubSub模式）的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布信息给订阅者，触发相应的监听回调。
    • 每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它的关联的组件得以更新。
    • vue.js3.0放弃了Object.defineProperty,使用更快的ES6原生Proxy（访问对象拦截器，也称代理器）

    50、computed和watch的区别

    • computed计算属性：依赖其他属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。
    • watch监听器：更多的是观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作。
    • 运用场景：
      • 当我们需要进行数值计算并且依赖于其它数据时，应该使用computed，因为可以利用computed的缓存特性，避免每次获取值时，都要重新计算。
      • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许我们执行异步操作（访问一个API），限制我们执行该操作的频繁，并在我们得到最终结果前，设置中间状态。
      • 多个因素影响一个显示，用computed；一个因素的变化影响多个其他因素、显示，用watch

51、computed和methods的区别

  • computed：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值
  • 对于method，只要发生重新渲染
  • method调用总会执行该函数

53、axios

易用、简洁且高效的http库，支持node端和浏览器端，支持promise，支持拦截器等高级配置。

54、sass

  • 一种CSS预编译语言
  • 安装和使用步骤
    1. 用npm安装加载程序（sass-loader、css-loader等加载程序）
    2. 在webpack.config.js中配置sass加载程序

    55、vue.js页面闪烁

    vue.js提供了一个v-cloak指令，该指令一直保存在元素上，直到关联实例结束编译。当和CSS一起使用时，这个指令可以隐藏未编译的标签，直到实例编译结束。
 [v-cloak]{ 
 display:none; 
} 
<div v-cloak>{{ title }}</div>

56、解决数据层次结构太深的问题

在开发业务时，经常会出现异步获取数据的情况，有时数据层次比较深，如以下代码：<span 'v-text="a.b.c.d">, 可以使用vm.$set手动定义一层数据: vm.$set("demo"，a.b.c.d)

57、 r o u t e 和 route和 route和router的区别

  • $route是“路由信息对象”，包含path，params，hash，query，fullPath，matched，name等路由信息参数。
  • $router是“路由实例”对象包括了路由的跳转方法，钩子函数等

58、理解vue的单项数据流

  • 数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父组件的状态，从而导致应用的数据流向难以理解。
  • 在子组件直接用v-model绑定父组件传过来的props这样是不规范的写法，开发环境会报警告
  • 如果要改变父组件的props值可以再data里面定义一个变量，并用prop的值初始化，之后用$emit通知父组件去修改

59、虚拟DOM及其优缺点

由于在浏览器中操作DOM是很昂贵的。频繁操作DOM，会产生一定性能问题。这就是虚拟Dom的产生原因。Vue2的Virtual DOM 借鉴了开源库 snabbdom 的实现。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点，是对真实DOM的一层抽象。

  • 优点
    • 1、保证性能下限：框架的虚拟DOM至少可以保证在不需要手动优化的情况下，依然可以提供还不错的性能，既保证性能的下限。
    • 2、无需手动操作DOM：只需要写好 View-Model的 代码逻辑，框架会根据虚拟DOM和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
    • 3、跨平台：虚拟DOM本质上是JavaScript对象，而DOM与平台强相关，相比之下虚拟DOM可以进行更方便地跨平台操作，例如服务器端渲染、weex开发等等。
  • 缺点
    • 1、无法进行极致优化：虽然虚拟DOM + 合理的优化，足以应对大部分应用的性能需要，但在一些性能要求极高的应用中虚拟DOM无法进行针对性的极致优化。
    • 2、首次渲染大量DOM时，由于多了一层DOM计算，会比innerHTML插入慢。

60、vuex页面刷新数据丢失解决方案

  • 需要做vuex数据持久化，一般使用本地存储的方案来保存数据，可以自己设计存储方案，也可以使用第三方插件
  • 推荐使用vuex-persist插件，它是为了vuex持久化存储而生的一个插件。不需要动手存取storage，而是直接将状态保存至cookie或者localStorage中

61、vuex为什么要分模块并加命名空间？

  • 模块： 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能会变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
  • 命名空间： 默认情况下，模块内部的 action、mutation、getter是注册在全局命名空间的 — 这样使得多个模块能够对同一 mutation 或 action 做出响应。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced:true 的方式使其成为带命名的模块。当模块被注册后，他所有 getter、action、及 mutation 都会自动根据模块注册的路径调整命名。

62、vue中使用了哪些设计模式？

  • 1、工厂模式 - 传入参数即可创建实例
    虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode。
  • 2、单例模式 - 整个程序有且仅有一个实例
    vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉。
  • 3、发布-订阅模式。（vue 事件机制）
  • 4、观察者模式。（响应式数据原理）
  • 5、装饰器模式（@装饰器的用法）
  • 6、策略模式，策略模式指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案 - 比如选项的合并策略。

63、vue的性能优化

  • 懒加载：图片和路由
  • 异步路由
  • 第三方插件的按需加载
  • 适当采用 keep-alive 缓存组件
  • 防抖、节流的运用
  • 服务端渲染 SSR or 预渲染

64、vue.set方法原理

  • 以下两种下修改vue是不会触发视图更新的
    • 1、在实例创建之后添加新的属性到实例上（给响应式对象新增属性）
    • 2、直接更改数组下标来修改数组的值。
  • Vue.set 或者说是 $set 原理如下
    因为响应式数据 我们给对象和数组本身新增了__ob__属性，代表的是 Observer 实例。当给对象新增不存在的属性，首先会把新的属性进行响应式跟踪 然后会触发对象 ob 的dep收集到的 watcher 去更新，当修改数组索引时我们调用数组本身的 splice 方法去更新数组。

65、函数式组件使用场景和原理

函数式组件与普通组件的区别

  • 1、函数式组件需要在声明组件时指定 functional:true
  • 2、不需要实例化，所以没有this，this通过render函数的第二个参数context代替
  • 3、没有生命周期钩子函数，不能使用计算属性，watch
  • 4、不能通过$emit对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
  • 5、因为函数组件时没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
  • 6、函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop，而普通的组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上（可以通过inheritAttrs属性禁止）
    优点：1.由于函数组件不需要实例化，无状态，没有生命周期，所以渲染性要好于普通组件2.函数组件结构比较简单，代码结构更清晰
    使用场景：

一个简单的展示组件，作为容器组件使用 比如 router-view 就是一个函数式组件。 “高阶组件”—用于接受一个组件为参数，返回一个被包装过的组件。
相关代码如下：

if (isTrue(Ctor.options.functional)) { // 带有functional的属性的就是函数式组件 return createFunctionalComponent(Ctor, propsData, data, context, children); } const listeners = data.on; data.on = data.nativeOn; installComponentHooks(data); // 安装组件相关钩子 （函数式组件没有调用此方法，从而性能高于普通组件）

66、子组件为何不可以修改父组件传递的prop？

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

Yolanda-Candy
关注
专栏目录
前端面试之 vue是什么？有什么优点？
kikikiuu的博客
03-25 7476
一.vue是什么？ Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。 什么是渐进式的框架？ 什么是自底向上增量开发？ 什么是视图层？ 单文件组件？和复杂单页应用是...
this.$refs 动态渲染文本内容_JavaScript动态创建div并写入文本
weixin_30610943的博客
01-22 757
介绍一下如何利用JavaScript动态创建div元素，然后在其中写入文本。代码实例如下：<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <...
标签中的ref属性
最新发布
qq_40792800的博客
09-04 911
可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。
VUE组件重新渲染（组件重载）的3种方式
weixin_60538045的博客
09-08 8965
这个最简单实用，如果需要每次在当前父页面更新时重载CompTable这个子组件就可以用这个方法，每次父组件更新 :key 都会重新取值，而时间戳每次都是不同的，组件发现 :key发生变化就会重新渲染。起初我还担心如果把 new Date().getTime() 直接放到。v-if可以实现 true (加载)和false(卸载)注意它仅仅影响实例本身和插入插槽内容的子组件，VUE 组件重新渲染（组件重载）的3种方式。会不会不生效，要不要传个变量给key，后来发现完全不用，直接放上去就可以。
解决vue2和vue3 ECharts二次渲染不出现的问题（切换不显示 ref）
Rziziの博客
02-11 1430
解决vue2和vue3 ECharts二次渲染不出现的问题（切换不显示 ref）
vue中如何刷新子组件，重新加载子组件
anwenagululu的博客
12-18 7660
三种方法：1.使用 Props 传递数据 2.使用$refs引用子组件 3.给子组件添加key值 1. 使用 Props 传递数据： 在父组件中通过修改 props 的值，传递新的数据给子组件，从而触发子组件的更新。 在父组件中使用ref为子组件创建引用，然后通过引用直接调用子组件的方法或访问其数据 key值变化之后，会自动重新渲染组件，vue中的key的作用主要是为了高效的更新dom, 它也可以用于强制替换元素/组件而不是重复使用它，完成的触发组件的生命周期钩子，触发过渡
2022前端面试系列——Vue面试题.pdf
12-14
Vue面试题知识点总结 本文总结了Vue面试题中的知识点，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP的区别等内容。 1. Vue的基本原理 Vue实例的创建过程中，Vue会遍历data中的属性，并使用Object....
前端面试题之——小程序篇
qq_43648865的博客
02-28 1444
，最后 wx.miniProgram.navigateTo({url: ‘/pages/login/login’+‘$params’}) wx.miniProgram.navigateTo({url: ‘/path/to/page’}) webview 的页面怎么跳转到小程序导航的页面？注意不能有大写字母，不可以存放对象 跳转页面时通过 navigator 传递需要的参数值 设置 id 的方法标识，通过 e.currentTarget.id 获取设置的 id 值，然后通过设置全局变量的方法来传 递数值。
2024前端面试题！（附答案及解析）（2024.10月最新版）
热门推荐
这世上从不缺让人上头的新鲜感，能顾及你情绪的人实属难得。
03-27 17万+
2024前端面试题！面试宝典！总结心得！（附答案及解析）会持续更新哦！（2024.10月最新版）感谢支持，你们的鼓励是我的动力！
2024前端面试系列——Vue面试题_描述下 vue 从初始化页面--修改数据--刷新页面 ui 的过程
2401_84419493的博客
04-28 924
但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而 React 更强调数据的不可变。
web前端面试高频考点——Vue3.x响应式（Composition API的逻辑复用、Proxy实现响应式）
qw12236的博客
09-20 210
文章目录系列文章目录一、Composition API 如何实现逻辑复用二、Vue3 如何实现响应式1、Object.defineProperty 的缺点2、Proxy 实现响应式3、Reflect 作用4、Proxy 实现响应式一、Composition API 如何实现逻辑复用抽离逻辑代码到一个函数函数命名约定为 useXxx 格式（React Hooks 也是）在 setup 中引用 useXxx 函数useMousePosition.js 文件。
vue 里面的 $forceUpdate() 强制实例重新渲染操作
10-14
主要介绍了vue 里面的 $forceUpdate() 强制实例重新渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2/3如何强制重新渲染整个页面
Fisher的专栏
03-05 2566
VoerkaI18n是一个非常优秀的前端多语言解决方案库，提供初始化、提取文本、自动翻译、编译、自动补丁等工具链支持。本文介绍了在开发@voerkai18n/vue时如何制刷新页面的经验和技巧
浅谈Vue的双向绑定原理——数据劫持+（订阅者/发布者）模式
王春燕的博客
05-08 3128
一、访问器属性 关于Vue的双向绑定，核心是Object.defineProperty()方法， 语法： Object.defineProperty(obj, prop, descriptor) 其中： obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。 其实，简单点来说，就是通过此方法来定义一个值。 调用，使用到了get方法， 赋值，使用到了set方法。 ...
$refs用法
昝殿慧
01-20 427
$refs获取dom元素 今天我们主要说一下几点 1、vue 获取普通元素（基础） 2、vue 获取列表（基础） 一、vue获取dom节点 （普通元素） 我们之前获取页面上的dom元素，很容易， 比如原生js的 document.getElementsByClassName jqurey的 $('类名') 而vue是一个MVVM框架，数据驱动，尽量能不操作dom层就不要操作，但是对于一些场景，我们不得不操作，那么怎么操作呢，其实也很简单 用ref 首先我们先将需要获取的那个元素绑定ref属性，例如input
基础面试题
马大哈的博客
09-07 634
面试题
vue 组件重新渲染
qq_23064501的博客
07-23 471
<gbroMarquee broadcastType='mould' v-if="hackReset" ref="gh" :key="timer" :viewHeight="39" :touchEvent="true" direction="left" :broadcastIconIsDisplay="false" :broadcastStyle='broadcastStyle' style="width: 100%"> <text @tap="navToDetail.
MintUI 上拉加载下拉刷新 解决添加this.$refs.loadmore.onBottomLoaded();页面卡死问题
weixin_44557053的博客
08-01 2399
用MintUI 写一个上拉加载下拉刷新，解决this.$refs.loadmore.onBottomLoaded();页面卡死问题 首先先导入样式和 js 文件 用脚手架写的话就按照下面的方式引入 //安装 npm install mint-ui -S //在main.js文件中，全局引入 import Mint from 'mint-ui'; Vue.use(Mint); //按需引入部分组...
2023前端面试题-Vue篇：原理、数据劫持和双向绑定
2023年前端最新面试题——Vue篇关于Vue的基本原理，Vue实例创建时会遍历data中的属性，利用Object.defineProperty（或者在Vue3.0中使用proxy）将它们转换为getter/setter，并且在内部追踪相关依赖。在属性被访问和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值