首页 > 其他 > 详细

vue嗯嗯

时间:2020-07-28 22:37:53      阅读:98      评论:0      收藏:0      [点我收藏+]

https://juejin.im/post/5d153267e51d4510624f9809?tdsourcetag=s_pctim_aiomsg
1,[vue] 在vue中watch和created哪个先执行?为什么? 
在wacth监控数据时,设置immediate:true;会优先执行watch,created后执行;反之则反
2,vue中mixins和extends有什么区别?
extend用于创建vue实例
mixins可以混入多个mixin,
extends只能继承一个,mixins类似于面向切面的编程(AOP),extends类似于面向对象的编程,
优先级Vue.extend>extends>mixins
3,在vue中created与activated有什么区别

使用<keep-alive>会将数据保留在内存中,如果要在每次进入页面的时候获取最新的数据,需要在activated阶段获取数据,承担原来created钩子中获取数据的任务。

被包含在 <keep-alive> 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated

activated:在组件被激活时调用,在组件第一次渲染时也会被调用,之后每次keep-alive激活时被调用。

deactivated:在组件被停用时调用。

注意:只有组件被 keep-alive 包裹时,这两个生命周期才会被调用,如果作为正常组件使用,是不会被调用,以及在 2.1.0 版本之后,使用 exclude 排除之后,

就算被包裹在 keep-alive 中,这两个钩子依然不会被调用!另外在服务端渲染时此钩子也不会被调用的。

什么时候获取数据?

当引入keep-alive 的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后,再次进入就不在重新解析而是读取内存中的数据,即,只有当数据变化时,

才使用VirtualDOM进行diff更新。有需要的话,页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以,有需要的话,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。
4,在vue项目如何引入异步组件?
{
path: ‘/name‘,
name: ‘name‘,
component: () =>
import(‘../views/name.vue‘),
},
5,vue中mixins有什么使用场景?

import mixin from ‘mixins/mixin‘;

Vue.mixin(mixin)
6,在vue项目中scss scoped穿透符>>>无效的解决方案有哪些?
::v-deep
7,为什么在v-for中的key不推荐使用随机数或者index呢?那要怎么使用才比较好呢?
因为在插入数据或者删除数据的时候,会导致后面的数据的key绑定的index变化,进而导致从新渲染,效率会降低
8 ,你有用过预渲染技术吗?怎么做的?
https://www.cnblogs.com/goloving/p/11380403.html
9
,vue-loader在webpack编译流程中的哪个阶段?
编译模板阶段:从入口文件出发,调用所有配置的Loader对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
10,预渲染和SSR(服务端渲染)有什么区别?
https://www.cnblogs.com/goloving/p/11380403.html
11,使用vue如何判断页面是否编辑及编辑页面未保存离开时,给出弹窗提示
beforeRouteLeave
12, vue的.sync修饰符可以用表达式吗?为什么?

Vue 本身是数据驱动渲染,所以数据(包括属性、计算属性等)变化可以触发界面数据呈现,但是界面的输入要反馈给组件,就需要用触发事件的方式来反馈。

双向绑定是用于更新属性事件的语法糖,使用 :属性名.sync="..." 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。

比如:
代码<my-comp :foo.sync="bar"></my-comp>
会被扩展成<comp :foo="bar" @update:foo="val => bar = val"></comp>
就是一个语法糖

13,v-if和v-show哪个优先级更高?

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

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

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

注意,v-show 不支持 <template> 元素,也不支持 v-else。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

此外,当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中,所以不推荐同时使用v-if 和 v-for。
14,如何批量引入组件?

vue中全局和局部引入批量组件方法

一、全局批量引入

创建一个.js文件,并在main.js中引入即可。
二、局部批量引入

15,vue的v-for如何倒序输出?
采用reverse() 实现数组倒序排列
16,
axios全局使用

import axios from ‘axios‘ Vue.prototype.axios=axios
17,
v-if 是重排 v-show是重绘
18,

 

 

 

vue嗯嗯

原文:https://www.cnblogs.com/ylblogs/p/13392978.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!