VUE基础

简述MVVM

什么是MVVM,MVVM和MVC以及MVP有什么区别

首先是 MVC ,MVC 是最常见的软件架构之一,在这个架构中,它将软件分为了3个部分:View、Controller、Model,各部分的通信方式如下:
View 将用户指定发送到 Controller,Controller 完成业务逻辑后,让 Model 改变状态,Model 改变状态后将新数据传给 View,整个的过程都是单向通信
随着业务量的扩大,Controller 需要处理各种逻辑,维护成本越来越高,也就衍生出了一个新的软件架构,即 MVVM。

MVP

MVVM 就是把 MVC 中的 Controller 的数据和逻辑处理部分从中抽离出来,用一个专门的对象去管理,即 ViewModel,是 Model 和 Controller 之间的一座桥梁。
MVVM 架构也是将软件分为了3个部分:View、ViewModel、Model,各部分通信方式如下:
View 与 ViewModel 双向绑定,View 的变动自动绑定在 ViewModel 中,然后 ViewModel 与 Model 进行双向通信,Model 就不与 View 直接进行通信。

Vue 生命周期

vue 生命周期就是 vue 实例从创建到销毁的过程,可以将此过程分为四个阶段:

创建阶段,此阶段有 beforeCreate 和 created 两个钩子函数:
beforeCreate 是new Vue()之后触发的第一个钩子,发生在实例创建之前,此时 data,methods 等数据和方法都还没初始化,还不能访问;
created 发生在实例创建之后,此时的 data 和 methods 已经初始化好了,可以进行调用或者操作,可以进行异步数据请求,例如数据初始化。

挂载阶段,此阶段有 beforeMount 和 mounted 两个钩子函数:
beforeMount 发生发生在挂载前,此时虚拟 Dom 已创建完成,可以对数据进行更改但是不会渲染到页面上;
mounted 发生在挂载后,此时真实的 Dom 挂载完毕,可以访问到 DOM 节点了,vue实例也完成了初始化,此时用户可以在浏览器上看到页面内容了。

运行阶段,此阶段有 beforeUpdate 和 updated 两个钩子函数:
beforeUpdate 发生在状态或者数据更新前,此时 data 中的数据状态已经发生变化了,但还没开始渲染 dom 树
updated 发生在更新后,此时 dom 节点被重新渲染了,页面显示的也是更新后的数据。但是要避免在这个阶段进行更改数据,可能会陷入死循环,可以用计算属性或者 watcher 进行状态改变。

销毁阶段,此阶段有 beforeDestroy 和 destroyed 两个钩子函数:
beforeDestroy 发生在实例销毁前,这个时候实例还没被销毁,vue 实例还能使用
destroyed 发生在实例销毁之后,这个时候 vue 实例已不存在,所有的子实例也被销毁,所有的指令被解绑,事件监听被移除。

每个生命周期适合哪些场景?生命周期钩子的一些使用方法:
beforecreate : 可以在这加个loading事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到DOM节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

Vue 如何实现组件间通信?

vue 组件的通信分为两种方式
一个是父子组件之间的通信,一个是非父子组件之间的通信(bus)

父子组件

props / emits

这是Vue跨组件通信最常用,也是基础的一个方案。

父组件通过 prop 向子组件传值

父组件:
<template>
  <div>
    <h3>this is father</h3>
    <!-- :传递到子组件的数据名="需要传递的数据" -->
    <Child :shop="shopList" />
  </div>
</template>

<script>
import Child from './child.vue';
export default {
  name: 'Father',
  components: {
    Child
  },
  setup() {
    const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
    return {
      shopList
    };
  }
};
</script>
子组件:
<template>
  <div>
    <p>this is child</p>
    {{ shop }}
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['shop']
};
</script>

子组件通过 emit 出发父组件的时间执行

父组件
<template>
  <div>
    <h1>【case1】父传子</h1>
    <p>父:好大儿,去帮为父买几个东西吧,东西通过 props 传给你了</p>
    <!-- :传递到子组件的数据名="需要传递的数据" -->
    <Child :shop="shopList" @giveClick="giveMoney" />
    <p>父:给给给,一共 {{ number }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import Child from './child.vue';
export default {
  name: 'Father',
  components: {
    Child
  },
  setup() {
    const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
    let number = ref();
    const giveMoney = msg => {
      console.log(msg);
      number.value = msg;
      console.log(number);
    };
    return {
      shopList,
      giveMoney,
      number
    };
  }
};
</script>
子组件
<template>
  <div>
    <p>子:好的爸爸,这是我收到的东西:{{ shop }}</p>
    <h1>【case2】子传父</h1>
    <p>子:爸爸我没钱了</p>
    <button @click="moneyClick">伸手要钱</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['shop'],
  setup(props, { emit }) {
    const moneyClick = () => {
      // 触发父组件中的方法,方法名要与父组件中的监听事件名一样
      emit('giveClick', '1000');
    };
    return {
      moneyClick
    };
  }
};
</script>
expose / ref

父组件获取子组件的属性或者调用子组件方法
defineExpose
someMethod
ref=“comp”

attrs

包含父作用域里除 class 和 style 除外的非 props 属性集合

v-model

可以支持多个数据双向绑定

爷孙组件

provide / inject

适用于隔代通信,例如爷孙组件
provide / inject 为依赖注入

provide:可以让我们指定想要提供给后代组件的数据或

inject:在任何后代组件中接收想要添加在这个组件上的数据,不管组件嵌套多深都可以直接拿来用

任意组件

Mitt

mitt 的用法:通过 on 方法添加事件,off 方法移除,clear 清空所有,emit

Vuex

Vuex 实现原理

Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作
vuexmutationaction
vuex 模块化
vuex 的挂载过程

vue实现双向数据绑定原理是什么

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,
通过Object.defineProperty()来实现数据劫持

实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何

watch 和 computed 和 methods 区别

计算属性和watch有什么区别?以及它们的运用场景?
Vue 计算属性和 watch 在什么场景下使用
data () { a: { b: 1 } }; 如何用 watch 监听 b 的变化

VueRouter 实现原理

vue router懒加载

Vue hash 路由和 history 路由的区别

keep-alive的实现

Keepalive 是什么,里面有哪些钩子

nextTick的实现

$nexttick 是干嘛的,你一般拿它做什么

你怎么理解Vue中的diff算法

插槽是什么 怎么使用的

常用指令列举

自定义指令你是怎么用的
vue常用语法、内置组件

v-model的实现以及它的实现原理

v-for中key的作用

使用 v-for 要求写 key,为什么

你知道Vue3有哪些新特性吗?它们会带来什么影响?

说一下vue3.0你了解多少
说一下 vue 有哪些优点和特点

其他

vue 为什么要用 template

Vue 数据响应式怎么做到的?

如何解决 vue 初始化页面闪动问题

vue 首屏渲染优化有哪些

Vue.set 是做什么用的?

vue动态传参以及获取

Eventbus具体是怎么实现的

nuxt 怎样配置路由,如何自定义路由,自定义的和约定路由哪个优先级高

new Vue后整个的流程

v-showv-if 有什么区别

vue 的模板编译原理

vnode的理解,compiler和patch的过程

你都做过哪些Vue的性能优化

vue中的data为什么返回的是一函数

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

什么是组件以及如何使用组件

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值