前端vue总结笔记,持续更新~

以下为本人临时整理出来的,如有遗漏还请告知,谢谢~

1.什么是MVVM?

咋一听是不是以为MVVM就是双向绑定?NO~NO~NO~,他们两个并不是一个东西哦。

MVVM其实指的是是Model-View-ViewModel

Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;

View 代表 UI 组件,它负责将数据模型转化成 UI 展现出来。

ViewModel 是一个同步 View 和 Model 的对象。

View 和 Model 俩者之间并没有直接的联系,而是通过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 因此 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会立即反应到 View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来,而 View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只关注业务逻辑,无需手动操作 DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。

2.MVVM与MVC有何区别?

mvc 和 mvvm 其实区别并不大。都是一种设计思想。

主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。

mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者需要主动更新到 View 。

3.什么是vue生命周期?

Vue 的生命周期指的是组件从创建到销毁的一系列的过程,被称为 Vue 的生命周期。通过提供的 Vue 在生命周期各个阶段的钩子函数,我们可以很好的在 Vue 的各个生命阶段实现一些操作。

一般是总概括为4个阶段,细分的话那就是8个,分别是创建前/后,载入前/后,更新前/后,销毁前/后。

  • 创建前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。
  • 载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
  • 更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
  • 销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在

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

相同点:功能控制元素的显隐性

不同点:

v-if :对元素进行销毁和重建。

 v-show :只是简单地 CSS 对元素进行display切换。

一般来说,,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好,v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块

 

5. vue中的组件传参方式 

(1)父子组件间通信

第一种方法是子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事 件来向父组件发送数据。

第二种是通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件,子组件通过 $parent 获得父组 件,这样也可以实现通信。

第三种是使用 provider/inject,在父组件中通过 provider 提供变量,在子组件中通过 inject 来将变量注入到组件 中。不论子组件有多深,只要调用了 inject 那么就可以注入 provider 中的数据。

(2)兄弟组件间通信

第一种是使用 eventBus 的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实 例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。

第二种是通过 $parent.$refs 来获取到兄弟组件,也可以进行通信。

(3)任意组件之间 使用 eventBus

其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。 如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。

这个时候 可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个 公共数据进行读写操作,这样达到了解耦的目的。

 

6 .什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这里的关键在于集中式存储管理。简单来说,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)

Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action,但Action也是无法直接修改State的,还是需要通过Mutation来修改State的数据。最后,根据State的变化,渲染到视图上。

7.watch的属性使用箭头函数定义可以吗?

不可以。this会是undefind,因为箭头函数中的this指向的是定义时的this,而不是执行时的this,所以不会指向Vue实例的上下文。

8.怎么访问子组件的实例或者子元素?

给组件加上节点ID,然后通过 this.$refs 来取到每一个子组件中的方法或者属性

9.:class和:style有几种表示方式?

4种

template>
    <div>
        <!--第一种对象语法 -->
        <div class="test" :class="{active:actived,'active-click': clicked&&actived}"></div>
        <!-- 第二种数组语法 -->
        <div class="test" :class="[actived?activeClass : '', clicked&&actived?activeClickClass : '']"></div>
        <!-- 第三种对象和数组混合 -->
        <div :class="[testClass,{active:actived},{'active-click':clicked&&actived}]"></div>
        <!-- 第四种对象和计算属性(推荐) -->
        <div :class="classObject"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                actived: true,
                clicked: true,
                testClass: 'test',
                activeClass: 'active',
                activeClickClass: 'active-click',
            }
        },
        computed: {
            classObject: function() {
                return {
                    test: true,
                    active: this.actived,
                    'active-click': this.actived && this.clicked,
                }
            }
        },
    }
</script>

10. vm.$nextTick有什么作用?

vm.$nextTick(() =>{this.handleadd()}),将handleadd回调延迟到下次 DOM 更新循环之后执行。

11.Vue在created和mounted这两个生命周期中请求数据有什么区别呢?

在created中,页面视图未出现,如果请求信息过多,页面会长时间处于白屏状态,DOM节点没出来,无法操作DOM节点。在mounted不会这样,比较好。

12. v-model的原理是什么?

<template>
    <div>
        <my-component v-model="value"></my-component>
        <!-- 等同 -->
        <my-component :value="value" @input="value=$event"></my-component>
        <button @click="value=true">显示</button>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                value:false,
            }
        },
        components:{
            myComponent:resolve =>require(['./my_component'],resolve),
        }
    }
</script>

 13.计算属性和方法有什么区别?

计算属性:是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。

方法:每当触发重新渲染时,调用方法将总会再次执行函数。当我们不希望有缓存,可以使用方法,但是如果求值开销大时建议用计算属性。

未完待续~~~~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值