vue面试题

最新推荐文章于 2024-05-20 10:06:54 发布

混搭数理化

最新推荐文章于 2024-05-20 10:06:54 发布

阅读量671

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42684926/article/details/119867896

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

VUE面试题（带数字，带序号）

1、v-show 与 v-if 有什么区别？

相同点：
v-show和 v-if都是控制 dom元素的显示和隐藏的。

不同点：
1、原理：

           v-show是通过控制元素的样式属性display的值，来完成显示和隐藏；
            v-if是通过对dom元素的添加和删除，完成显示和隐藏

  2、使用场景：由原理（做法）得出使用场景的区别

            v-show：使用在dom元素频繁切换的场景
            v-if：当dom元素的切换不频繁，可以使用。特别是，首次元素处于隐藏的情况下。

2、说说你对 SPA 单页面的理解，它的优缺点分别是什么？

1）、首先：

SPA的英文是single-page application ，也就是说整个项目中只有一个页面。

    单页面应用的实现思路：  就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS，页面的内容的变化，靠动态操作DOM。

2）、其次：

说说它的优点和缺点：

它的优点有三点：

  第一点：**局部刷新。**用户体验好、快，内容的改变不需要重新加载整个页面。

  第二点：**服务器的压力小。**基于上面一点，SPA 对服务器的压力小；

  第三点：**前后端职责分离。**架构清晰，前端进行交互逻辑，后端负责数据处理；

它的缺点也有三点：

  第一点：**初次加载耗时多。**为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

  第二点：**前进后退路由管理问题。**由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理（这是vue-router做的）；

  第三点：**SEO 难度较大。**由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

3、怎样理解 Vue 的单向数据流

首先

  单项数据流是发生在**父组件朝子组件传值的时候**，所有的 prop 使得其父子 prop 之间形成了一个单向下行绑定。
   也就是说：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态。

而且

   每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。所以，在一个子组件内部改变 prop，Vue 会在浏览器的控制台中发出警告。

4、computed 和 watch 的区别和运用的场景？

首先（相同点）：

computed 和 watch都可以实现数据的监听。

其次（区别）：

第一（本质）：
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，当依赖的属性值发生改变时，才会重新计算 computed 的值，它可以设置getter和setter.
watch： 更多的是观察的作用，每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter.

第二（运用场景）：
computed：当我们需要进行数值计算，并且依赖于其它数据时，使用 computed。
watch：当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch。

5、直接用下标（索引）给一个数组项赋值，Vue 能检测到变化吗？

不能

因为，vue再做数据劫持时，只对数组做了劫持，没有对数组的每一项进行劫持。所以，用下标的方式修改数组项时，vue不能检测到数据的变化。

为了解决他们，Vue 也提供了操作方法： Vue.set
Vue.set（数组名，下标，新值）

6、谈谈你对 Vue 生命周期的理解？

1）、生命周期是什么？
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2）、各个生命周期阶段及其钩子函数

vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。

第一阶段：数据挂载阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。

                 该阶段前后的两个钩子函数：beforeCreate和created

第二阶段：模板渲染阶段：把vue对象的数据渲染到模板上。

                 该阶段前后的两个钩子函数：beforeMount和mounted

第三阶段：组件更新阶段：当数据发送变化时，组件会进行重新渲染，所以，准确的说是，组件重新渲染阶段。

                 该阶段前后的两个钩子函数：beforeUpdate和updated

第四阶段：组件销毁阶段：组件销毁。

                 该阶段前后的两个钩子函数：beforeDestroy和destroyed

可以补充：

当使用keep-alive包裹组件时，会有组件激活和停用之说，这两个钩子函数分别是：activited和deactivated

还可以补充：

项目场景，如：发送请求，如：父组件修改子组件的props引起子组件的更新等等。

详情请参考： https://blog.csdn.net/jiang7701037/article/details/83118665

7、Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父子组件钩子函数的执行顺序可以归类为4个部分：

第一部分：首次加载渲染：

   父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

第二部分：父组件修改子组件的props值时：
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

第三部分：父组件修改的数据跟子组件没有关系时：

不会影响子组件   父 beforeUpdate -> 父 updated

第四部分：销毁过程：

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

8、在哪个生命周期内调用异步请求？

答：大部分时候，会在created发送请求。
因为，
1）、此时data已经挂载到vue实例了，放在beforeCreate里太早，vue实例没有数据，放在mounted里太晚。
2）、放在 created 中有助于一致性，因为ssr不支持 beforeMount 、mounted 钩子函数。
Created的使用场景：如果组件的初始数据来自于后端，那就在created里发送请求

9、组件中 data 为什么是一个函数？

如果不用函数，即：data是引用各类型，那么所有组件对象的data会指向同一块内存区域，导致数据之间互相影响。

使用函数时，每次实例化组件时（<标签名>），调用（data）函数，return一个新(new)的data对象。这样每个组件实例的data所指向的内存空间是独立的，data的属性值不会互相影响。

10、v-model 的原理？

v-model 指令主要用在表单元素上实现数据双向绑定的。
例如：input、textarea、select 等创建双向数据绑定，本质上不过是语法糖，其实v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

11、Vue 实现数据绑定的原理

vue数据绑定是通过 数据劫持和观察者模式 的方式来实现的。

 1、数据劫持：使用Object.defineProperty();

   目的是：**感知属性的变化**。当给属性赋值时，程序是能够感知的（知道的）。如果知道的话，就可以控制属性值的有效范围，也可以改变其它属性的值等。

  当你把一个普通的 JavaScript 对象（json）传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

Object.defineProperty()函数：https://blog.csdn.net/jiang7701037/article/details/102785223

 2、观察者模式（发布订阅模式）：
     目的是：**当属性发生变化时，使用该数据地方（模板，计算属性，watch等等）跟着变化**

12、Vue 组件间通信有哪几种方式？

    Vue 组件间通信主要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面我们分别介绍每种通信方式：

（1）props / $emit ：父子组件通信

（2）ref：适用父子组件通信

（3）EventBus （$emit / $on）：适用于父子、隔代、兄弟组件通信

（4）$root：集中管理，适用于所有场景

（5）Vuex 适用于所有场景

13、谈谈你对 keep-alive 的了解？

keep-alive 可以缓存其它组件及其的组件的状态，避免了组件的频繁创建和销毁。

它有三个特性：

1）、用于缓存组件，一般结合路由和动态组件一起使用。

2）、提供 include 和 exclude 属性。两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；

3）、对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

14、Vue 中的 key 有什么作用？

首先

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

再说一下，diff算法的执行过程：

1）、oldCh 和 newCh 各有两个头尾的变量 oldStartIndex、oldEndIndex 和 newStartIndex、newEndIndex，
2）、在新节点和旧节点进行两两对比时，共有4种比较方式：
a.newStartIndex 和oldStartIndex 、
b.newEndIndex 和 oldEndIndex 、
c.newStartIndex 和 oldEndIndex 、
d.newEndIndex 和 oldStartIndex，
如果以上 4 种比较都没匹配，如果设置了key，就会用 key 再进行比较。

15、你对 Vue 项目进行哪些优化？

第一个方面：代码层面的优化
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
长列表性能优化
事件的销毁
图片资源懒加载
路由懒加载
第三方插件的按需引入
优化无限列表性能
服务端渲染 SSR or 预渲染
第二个方面：Webpack 层面的优化
Webpack 对图片进行压缩
减少 ES6 转为 ES5 的冗余代码
提取公共代码
模板预编译
提取组件的 CSS
优化 SourceMap
构建结果输出分析
Vue 项目的编译优化
第三个方面：基础的 Web 技术的优化
开启 gzip 压缩
浏览器缓存
CDN 的使用
使用 Chrome Performance 查找性能瓶颈

16、动态路由传参2种方式params与query

1）、params

传

声明式：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
编程式：
$router.push({ name: 'user', params: { id: '123' }})

接

 //模板里的写法：
 $route.params.参数名
 
 //脚本里的写法:
 this.$route.params.参数名

动态路由匹配也行。

1）、路由配置：{ path: ‘/user/:id’, component: User }

2）、传参：

//声明式
用户01001的信息
//编程式
$router.push("/user/01001");

3）、接值：

//模板里的写法：
$route.params.参数名

//脚本里的写法:
this.$route.params.参数名

2）、query

传：

// 带查询参数，变成 /register?plan=private
$router.push({ path: '/register', query: { plan: 'private' }})
注意：如果提供了 path，那么params 会被忽略

接：

 //模板里的写法：
 $route.query.参数名 
 //脚本里的写法:
 this.$route.query.参数名

17、vue实例和vue组件写法的区别

1、 data是个函数（面试题）
一个组件的 data 选项必须是一个函数,且要有返回object，只有这样，每个实例（vue组件对象）就可以维护一份被返回对象的独立的拷贝，否则组件复用时，数据相互影响,也就是说，组件的作用域是独立的。
2、组件模板（html代码）只能有一个根标签
3、组件名不可和html官方的标签名同名
4、组件没有el选项，只有根实例存在el
5、书写：组件名如果驼峰，那么使用时，用短横线（羊肉串的写法）

18、谈谈你对vueX的理解

1、vueX是干什么的

	   vuex能够**保存全局数据**，供整个应用使用，可以在组件之间传递数据。

       vuex保存的数据是**响应式的**	

       vuex保存的数据可以**跟踪状态的变化**

2、vueX的核心概念

     state   :      数据仓库 ，存储所有的  **共享数据**  ，相当于vue组件里的data
	getter ： 在state的基础上  **派生的数据**， 相当于vue组件里 computed
	mutation：修改state的数据时，用mutation，这与**跟踪状态** 有关系
	 action：解决mutation里只能有同步代码的问题，action里可以有**异步代码**

3、vueX的数据流

      组件里 dispatch（派发）vueX中的 action，action里commit（提交）mutation，mutation里修改state。state被修改后，会响应式到组件上。

     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6C1wMGpE-1629698316371)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1599989118212.png)]

19、vue路由懒加载

vue的SPA（Single Page Application）应用里，当（webpack）打包构建时，会把所有的js打在一起，JavaScript 包会变得非常大，并在第一次请求时全部下载完毕，影响页面加载（性能）。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

目前有三种方式实现路由组件的懒加载，分别是：

vue异步组件
es 的 import()
webpack的require.ensure()

1）、 vue异步组件

把路由配置，进行修改

{

    path: '/shopcar',

    name: 'shopcar',

    component: resolve => require(['@/pages/ShopCar'],resolve)

},

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JOiAXrPt-1629698316377)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

1）、运行是打开chrome的network，就会看到进入路由 /shopcar 时，会多出另外一个js文件。一般是0.js或者1.js

2）、用npm run build打包时，wepback就会多打了一个 js文件（如：0.b5a82d6947b2e30edcc8.js），这个js文件就是把ShopCar文件进行了单独打包。同样的在network里，就会看到进入路由 /shopcar 时，多出一个单独的js文件的请求

注：这种方式，webpack会把每个异步组件单独打成一个js文件。

2）、es的import()

主要是把原来的引入方式进行修改，路由配置就不用改了：

1、不指定webpackChunkName，每个组件单独打一个js文件

原来是：import ShopCar from ‘@/pages/ShopCar’

修改后：const ShopCar = () => import(’@/pages/ShopCar’);

修改后的做法是定义了一个函数，由于函数不调用不执行，所有，一开始时，并不会引入该组件，只有路由跳转时才会调用该函数。

2、指定webpackChunkName，相同的webpackChunkName就会打在同一个js文件里

1）、以下两个组件的webpackChunkName相同，所以，打在一个js文件里

const ShopCar = () => import(/* webpackChunkName: 'demot' */ '@/pages/ShopCar');

const GoodsDetailPage = () => import(/* webpackChunkName: 'demot' */ '@/pages/GoodsDetailPage');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lFy0tpQ8-1629698316381)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

2）、下面这个组件的webpackChunkName和上面两个不一样，所以，单独打在一个js文件里

const Login = () => import(/* webpackChunkName: 'demoty' */ '@/pages/Login');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qChKDxLS-1629698316385)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

3）、webpack的require.ensure()

这种方式，只改路由配置即可。

如：

{

    path: '/GoodsDetailPage',

    name: 'GoodsDetailPage',

    component: r => require.ensure([], () => r(require('@/pages/GoodsDetailPage')), 'demot')

},

{

    path: '/Login',

    name: 'Login',

    component: r => require.ensure([], () => r(require('@/pages/Login')), 'demot')

},

{

    path: '/shopcar',

    name: 'shopcar',
    
    component: r => require.ensure([], () => r(require('@/pages/ShopCar')), 'demoty')

},

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vz3Ek820-1629698316392)(data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)]

以上代码中，我把Login和GoodsDetailPage使用了相同的chunkName

20、MV*（MVC，MVP，MVVM）

答：

  这是项目的架构模式。优点：耦合度低、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理。

**1、MVC是从后端演变后的项目架构模式。**    

    M：model，模型，主要完成业务功能，在数据库相关的项目中，数据库的增删改查属于模型（重点）。
    V：view，视图，主要负责数据的显示
    C：controller，控制器，主要负责每个业务的核心流程，在项目中体现在路由以及中间件上。

2、MVP

     MVP是由MVC演变过来的。

     P：Presenter  代替里C。

    在MVP中View并不直接使用Model，而在MVC中View可以绕过Controller从直接Model中读取数据。

3、MVVM

   MVVM是Model-View-ViewModel的缩写，MVVM模式把Presenter改名为ViewModel，基本与MVP模式相似。 唯一区别是：**MVVM采用数据双向绑定的方式**

   在做vue的开发时，程序员写的代码和vue框架本身合起来是属于MVVM模式。

21、你了解Vue.js吗？

这种题，一般是比较难以回答的，问得很模糊，

 如果不想多说，那就直接回答：了解并做过五个项目。

 如果想回答详细的话，参考思路如下：

 1）、vueJS是基于MVVM的JS框架

 2）、有（常见的）13个指令：

 3）、有（常见的）8个配置项：el，data，computed，watch，components，filter，directives，mixins

 4）、vue实例生命周期分为四个阶段，八个生命周期函数

 5）、vue做项目时会用到的全家桶技术：vueJS框架，vueX，vue-router，aixos，vant组件库等等

 6）、我用vue框架一共做过五个项目。

………………………………

22、vue-router的两种路由模式的区别

路由模式分为两种：hash和history；通过设置vueRouter对象的mode属性来完成修改。

区别：

1）、外观上

hash模式时，路径上有#。

history模式时，路径上没有#。

2）、原理上

   **hash模式通过修改location.href来完成**

   使用锚点连接的思路，使用hash模式不会给后端发请求。当然，在hash值变化时，会同时触发window对象的onhashchange事件，并可以通过事件对象的oldURL属性和newURL属性 得到新旧URL。

<body>
    <div>
        <a href="#p01" >p01</a><br/>
        <a href="#p02" >p02</a><br/>
        <a href="#p03" >p03</a>
    </div>
    <br/><br/><br/><br/><br/><br/>
    <a name="p01">我是第一个p</a>
    <br/><br/><br/><br/><br/><br/>
    <a name="p02">我是第二个p</a>
    <br/><br/><br/><br/><br/><br/>
    <a name="p03">我是第三个p</a>
    <br/><br/><br/><br/><br/><br/>
</body>
</html>
<script>
window.onhashchange = function(event){
    console.log("旧url",event.oldURL);
    console.log("新的url",event.newURL);
}
</script>

2)、**通过修改history.pushState来完成**

如：

window.history.pushState(null,null,"p01.html");
window.location.reload();//想测试的话，尽量加上这句话，要不然，地址变了，但是页面并没有出现。

   history模式会给后端发请求（如果刷新当前页面的话），一旦，后端和前端提供了同样的路径，那么，浏览器的请求结果就会有问题，到底是后端的资源还是前端的资源（不同的后端处理思路不停），还好，我们一般在后端apiserver的请求路径的前面习惯性的有个 /api。

     所以，由于不同服务端的处理思路不同。所以，需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 `index.html` 页面（单页面），这个页面就是你 app 依赖的页面。否则，就会返回404。

    你可以改成history的模式，测试一下，如果刷新当前页面，那么，浏览器会朝后端发送请求（给当前路径）。

23、Vue路由守卫的三种方式，及其钩子函数和参数

1）、全局守卫

全局守卫有前置守卫和后置守卫，是vueRouter对象的两个钩子函数，分别是 beforeEach和afterEach。

**前置守卫：**

router.beforeEach((to, from, next) => {
 	//	to: 目标路由
 	//	from: 当前路由

 	// next() 跳转  一定要调用
  	next(false);//不让走
	next(true);//继续前行
 	next('/login')//走哪
	next({path:'/detail/2',params:{},query:{}})//带点货
 }

后置守卫：

router.afterEach((to,from)=>{
   //全局后置守卫业务
})

如果能够回答上过程，肯定有加分：

//过程：
1、请求一个路径：如：/Index
2、经历前置守卫
决定了能去哪个路径
3、根据去的路径，找对应component（路由配置）
4、经过后置守卫
5、创建组件

2）、路由独享守卫

写在路由配置里。钩子函数名：beforeEnter，只有前置守卫

如：

// src/router/index.js
{
  path: '/user',
  component: User,
  beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 
    console.log('路由独享守卫');
    if(Math.random()<.5){
      next()
    }else{
      next('/login')
    }
   }
 }

3）、组件内部守卫

写在组件对象里。分别有前置守卫，后置守卫，路由改变守卫（当前组件被复用的情况,不是路径改变）三个钩子函数。

export default{
    data(){return {}}
  ……………………  

    //组件内部钩子
    beforeRouteEnter (to, from, next) {//前置
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
    },
    beforeRouteUpdate (to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave (to, from, next) {//后置
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
}

24、为何vue采用异步渲染？

1、vue采用异步队列渲染是为了提高性能，在异步队里会去掉重复的无效的渲染。

    当vue中的数据发生改变后，vue框架会把该数据引起的dom更新放入异步队列（ 缓冲在同一事件循环中发生的所有数据变更 ），进行排队。 如果同一个 watcher 被多次触发，只会被推入到队列中一次 。 这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的 。

2、如果不采用异步渲染，而是在数据发生改变后，立即更新dom，如果有重复无效的渲染，那么，就会造成性能的浪费。

25、nextTick实现原理？

1）、为什么用Vue.nextTick()

 首先，JS是单线程的，那么，它如何处理异步操作。

所有同步任务都在主线程上执行，形成一个执行栈。
主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件（所以，也叫事件队列），进行排队（处于等待状态）。
当执行栈中的所有同步任务执行完后，就会读取任务队列（事件队列）中的任务（事件）。即：任务队列中的任务就结束了等待状态，进入执行栈。
主线程不断重复第三步。直到任务队列和执行栈里的代码执行完毕。

了解一个事件循环： https://blog.csdn.net/jiang7701037/article/details/95887439

其次，vue更新DOM的思路。使用的就是异步更新队列，所以，就使用了事件循环。目的是提高性能，避免无效的重复的DOM更新。即：vue中更新数据后，并不会立即更新DOM，而是把数据引起的DOM更新放入到异步更新队列里。等待下次事件循环（tick），并在两个tick之间进行UI渲染。这样程序员就不能在更改数据后，立即获取更新后的DOM，也不知道什么时候DOM能够更新。基于此，vue提供了nextTick函数。让程序员操作更新后DOM的代码放入到nextTick的回调函数里。由nextTick内部，在更新完DOM后，调用回调函数。

示例代码：

this.msg = "hello"
this.$nextTick(()=>{
     操作更新后DOM的代码。
});

2）、什么是Vue.nextTick()

Vue.nextTick的代码思路示意

function nextTick(cb){
	//DOM 更新
	
	cb();
}

那么，vue是如何知道DOM更新了？

MutationObserver：这是HTML5新增的API。用于监视DOM变动的接口，它可以监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等
另外，考虑到，微任务比宏任务耗时少，浏览器的兼容性。所以，vue中延迟调用优先级如下：
Promise > MutationObserver > setImmediate > setTimeout

3)、应用场景：

    在Vue生命周期的created()钩子函数里，如果要进行DOM操作，一定要把DOM操作放在Vue.nextTick()的回调函数中。

    在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作应该放在Vue.nextTick()的回调函数中。

26、何时需要使用beforeDestroy？

    总体来说，需要清除的是：当前组件不会自动销毁的数据（不属于当前组件的数据），并且该数据只是在当前组件里使用。

1）、清除定时器（定时器是window对象的，不主动清除，是不会清除的）

2）、 $o n 方法，那需要在组件销毁前解绑。（$ on虽然属于Vue的实例方法，但是，这个实例很有可能不是当前vue组件（如：事件总线中的用法））

3）、解除事件的绑定 scroll mousemove （这些事件是绑定在window对象或者document对象上的）

27、Vue中v-html会导致哪些问题

1）、可能会导致XSS攻击。因为V-html更新的是元素的 innerHTML 。内容按普通 HTML 插入，不会作为 Vue 模板进行编译。

2）、在单文件组件里，scoped 的样式不会应用在 v-html 内部。因为那部分 HTML 没有被 Vue 的模板编译器处理。怎么解决呢？如果你希望针对 v-html 的内容设置带······作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局

3）、后台返回的html片段，以及css样式和js，但是返回的js是不执行的，因为浏览器在渲染的时候并没有将js渲染，这时要在$nextTick中动态创建script标签并插入

29、为什么v-for与v-if不能连用

  应该说，建议不要连用，或者说，在循环时，通过if只能拿到少部分数据时，建议不要使用。

  原因： v-for比v-if优先级高，如果遍历的数组元素个数比较多，但是满足v-if条件比较少的情况下。会浪费性能。而且，每次刷新页面时，都会执行这样性能不高的代码。



  解决：可以在computed里循环数组，通过filter的方式，过滤出需要的数据。而computed是有缓存的，这样可以节约内存

如：
      computed:{
          isCompleteTask:function(){
              return this.todos.filter(item=>item.isComplete);
          }          
      }

30、如何自定义v-model

答：使用vue组件中的选项model。

    首先，官方组件里可以使用v-model。而且，vue框架针对官方组件（文本框，单选钮，复选框，下拉框）都有绑定的属性和事件。如：文本框所绑定的属性是value，绑定的事件是input。

    那么，自定义组件里，如何使用v-model指令。就需要在vue组件里增加model选项。

    如下示例：

Vue.component('my-checkbox', {
  props:['ccc','ddd'],//声明了自定义组件的属性。
  model: {
    prop: 'ccc', //表示v-model所绑定的属性是 ccc
    event: 'change'//表示v-model所绑定的事件是是 change
  },
  ……………………
}

官网地址： https://cn.vuejs.org/v2/api/#model

  原因： v-for比v-if优先级高，如果遍历的数组元素个数比较多，但是满足v-if条件比较少的情况下。会浪费性能。而且，每次刷新页面时，都会执行这样性能不高的代码。



  解决：可以在computed里循环数组，通过filter的方式，过滤出需要的数据。而computed是有缓存的，这样可以节约内存

如：
      computed:{
          isCompleteTask:function(){
              return this.todos.filter(item=>item.isComplete);
          }          
      }

30、如何自定义v-model

答：使用vue组件中的选项model。

    首先，官方组件里可以使用v-model。而且，vue框架针对官方组件（文本框，单选钮，复选框，下拉框）都有绑定的属性和事件。如：文本框所绑定的属性是value，绑定的事件是input。

    那么，自定义组件里，如何使用v-model指令。就需要在vue组件里增加model选项。

    如下示例：

Vue.component('my-checkbox', {
  props:['ccc','ddd'],//声明了自定义组件的属性。
  model: {
    prop: 'ccc', //表示v-model所绑定的属性是 ccc
    event: 'change'//表示v-model所绑定的事件是是 change
  },
  ……………………
}

官网地址： https://cn.vuejs.org/v2/api/#model

混搭数理化

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue面试题

VUE面试题（带数字，带序号）1、v-show 与 v-if 有什么区别？相同点：v-show和 v-if都是控制 dom元素的显示和隐藏的。不同点：1、原理： v-show是通过控制元素的样式属性display的值，来完成显示和隐藏； v-if是通过对dom元素的添加和删除，完成显示和隐藏 2、使用场景：由原理（做法）得出使用场景的区别 v-show：使用在dom元素频繁切换的场景 v
复制链接

扫一扫