2022-04-07

1.什么是vue的生命周期?

Vue实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程,我们称这是Vue的生命周期。

2.vue生命周期的作用是什么?

它的生命周期中有多个事件钩子,让我们在控制整个vue实例的过程时更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段?

它可以总共分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/销毁后

4.第一次页面加载会触发那几个钩子?

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪个周期中就已经完成?

DOM渲染在mounted中就已经完成了

6.生命周期钩子的一些使用方法:

1.beforecreate:可以在加个loading事件,在加载实例是触发

2.created:初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

3.mounted:挂载元素,获取到dom节点

4.updated:如果对数据统一处理,在这里写上相应函数

5.beforeDestroy:可以一个确认停止事件的确认框

6.nextTick:更新数据后立即操作dom

7.v-show与v-if的区别

v-show是css切换,v-if是完整的销毁和重新创建

使用频繁切换时用v-show,运行时较少改变时用v-if

V-if=’false’v-if是条件渲染,当false的时候不会渲染

使用v-if的时候,如果值为false,那么页面将不会有这个html标签生成

v-show则是不管值是为true还是false,html元素都会存在,只是css中的display显示或隐藏

v-show 仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时,使用v-show会更加节省性能上的开销;当只需要一次显示或隐藏时,使用v-if更加合理。

8.开发中常用的指令有哪些?

v-model:一般用在表达输入,很轻松的实现表单控件和数据的双向绑定

v-html:更新元素的innerHTML

v-show与v-if:条件渲染,注意二者区别

v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了,就可以指定事件的处理函数

v-for:基于源数据多次渲染元素或模板

v-bind:当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM语法

v-bind:title=”msg”简写:title="msg"

9.绑定class的数组用法

1.对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”

2.数组方法v-bind:class="[class1,class2]"

3.行内v-bind:style="{color:color,fontSize:fontSize+'px'}”

10.路由跳转方式

1.router-link标签会渲染为标签,咋填template中的跳转都是这种;

2.另一种是编辑是导航,也就是通过js跳转比如router.push('/home')

12.computed和watch有什么区别

computed

computed是计算属性,也就是计算值,它更多用于计算值的场景

computed具有缓存性,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是[观察]的作用,类似于某些数据的监听回调,用于观察props $emit或者本组件的值,当数据变化时来执行回调进行后续操作

无缓存性,页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算,而且依赖于其他数据,那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化。

13.vue组件的scoped属性的作用

在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的;

但是也得慎用:样式不易(可)修改,而很多时候,我们是需要对公共组件的样式做微调的;

解决办法:

①:使用混合型的css样式:(混合使用全局跟本地的样式)  /* 全局样式 */  /* 本地样式 */

②:深度作用选择器(>>>)如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符: .a >>> .b { /* ... */ }

14.vue是渐进式的框架的理解:(主张最少,没有多做职责之外的事)

Vue的核心的功能,是一个视图模板引擎,但这不是说Vue就不能成为一个框架。如下图所示,这里包含了Vue的所有部件,在声明式渲染(视图模板引擎)的基础上,我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是,这些功能相互独立,你可以在核心功能的基础上任意选用其他的部件,不一定要全部整合在一起。可以看到,所说的“渐进式”,其实就是Vue的使用方式,同时也体现了Vue的设计的理念

在我看来,渐进式代表的含义是:主张最少。视图模板引擎

每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。

Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。

渐进式的含义,我的理解是:没有多做职责之外的事。

15.vue.js的两个核心是什么(数据驱动、组件系统。)

数据驱动:Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制,核心是VM,即ViewModel,保证数据和视图的一致性。

16.vue常用修饰符

修饰符分为:一般修饰符,事件修身符,按键、系统

①一般修饰符:

.lazy:v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步

<inputv-model.lazy="msg">

.number

.trim

1.如果要自动过滤用户输入的首尾空白字符

② 事件修饰符

<av-on:click.stop="doThis"></a><!-- 阻止单击事件继续传播 -->

<formv-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重载页面 -->

<av-on:click.stop.prevent="doThat"></a> <!-- 修饰符可以串联 -->

<formv-on:submit.prevent></form>   <!-- 只有修饰符 -->

<divv-on:click.capture="doThis">...</div>   <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->

<divv-on:click.self="doThat">...</div>  <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 -->

<av-on:click.once="doThis"></a> <!-- 点击事件将只会触发一次 -->

③按键修饰符

全部的按键别名:

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

或者

④系统修饰键 (可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。)

.ctrl.alt.shift.meta

或者Dosomething

20.Vue 组件中 data 为什么必须是函数

vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。

如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • 1.什么是vue的生命周期? Vue实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、...
    菜包阅读 358评论 0 0
  • 基础知识: vue的生命周期:beforeCreate/created、beforeMount/mounted、b...
    waterte阅读 204评论 0 0
  • Vue.js(读音/vjuː/, 类似于 view)是一个构建数据驱动的web 界面的渐进式框架。Vue.js的目...
    xingyunfuhao阅读 565评论 0 0
  • 一、概念介绍 Vue.js和React.js分别是目前国内和国外最火的前端框架,框架跟类库/插件不同,框架是一套完...
    刘远舟阅读 1,035评论 0 0
  • vue 学习 CDN 一. Vue 实例 1.1 创建一个 Vue 实例 每一个Vue应用都是通过Vue函数创建一...
    坚持日更的路上阅读 249评论 0 0