Vue基础

最新推荐文章于 2025-05-22 10:13:24 发布

蓝精灵001

最新推荐文章于 2025-05-22 10:13:24 发布

阅读量628

点赞数 8

文章标签： vue.js 前端 javascript 面试学习开发语言前端框架

本文链接：https://blog.csdn.net/2401_86373285/article/details/148107120

版权

Vue 基础

理论 - 数据驱动视图

面试题

1. 简单聊聊 MVVM <=> 数据视图绑定

语义化模板
MVC：Model(结构)、View(视图 | DOM、UI)、Controller(控制器)
MVVM：Model(数据)、View(视图 | DOM、UI)、ViewModel(视图模型 | 数据绑定)
- 数据本身会绑定在 viewModel 层，视图层跟 viewModel 层可关联
- 视图发生变化 => viewModel => 更新数据
- 数据发生变化 => viewModel => 更新视图

2. 双向绑定的实现 | 响应式原理 | diff

compile | defineReactive | tick 数据双向绑定 => buildTemplate

compile

利用{{ }}语法糖构筑了数据与 vm 的绑定关系。通过compile方法将模板中的{{}}语法糖编译成v-model指令
通过视图绑定来处理数据 => v-model指令, :value,@input

defineReactive

数据劫持
依赖关系收集
下方通知

const vueObj = {
	name: "vue",
};

const vue1 = vueObj;
vueObj.courser = "js";
/* 使用 */
//  {{ vue1.courser }}

tick

tick: render => vnode => dom
数据变化后，通知视图更新
视图更新后，通知数据变化

// domdiff
// 头尾对比
[1, 2, 3, 4, 5, 6];
[6, 5, 3, 4, 8, 1];

(后续有详细 diff 讲解)

实践 - Vue 基础

{{ }}:会自动形成响应式，当数据变化时，视图会自动更新

Vue 3 ：

<template>
	<div>
		{{ msg }}
		<!-- Hello Vue3 -->
		<br />
		{{ vueObj.msg }}
		<!-- Hello Test -->
		<br />
		{{ msg3 }}
		<!-- Hello Test 3 -->
		<br />
		{{ state.name }}
		<!-- Vue3 -->
		<button @click="handleAdd">过生日</button>
	</div>
</template>

<script setup>
  import { ref, reactive } from "vue";
  // 1. 形成响应式数据
  let msg = "Hello World";
  msg = "Hello Vue3";
  // 2. 整体数据深层响应监听
  let msg1 = "Hello Test";
  const vueObj = {
  	name: "Vue3",
  	age: 18,
  };
  vueObj.msg = msg1;
  // 3. 未被响应式的数据不会被动态监听
  let msg2 = "Hello Test 2";
  // 4. 主动定义响应式数据
  const msg3 = ref("Hello Test 3");
  console.log("msg3.value :>> ", msg3.value);
  const state = reactive({
  	name: "Vue3",
  	age: 18,
  	stateObj: {
  		arr: [1, 2, 3],
  	},
  });

  // 注册函数
  const handleAdd = () => {
  	// 1. 直接修改
  	msg3.value = "Hello Test 4";
  	state.age++;
  	// 2. 深层修改
  	state.name = "Vue3 2";
  	state.stateObj.arr.push(4);
  };

	// 生命周期，挂载完毕
  onMounted(() => {
  	console.log("onMounted :>> ");
  });
</script>

Vue2

vue2 中，所有在data中声明的变量，都会被 vue 响应式处理，当数据变化时，视图会自动更新
放在 data 之外声明的变量，不会自动形成响应式，当数据变化时，视图不会自动更新

Vue 的生命周期

创建：beforeCreate、created (setup) => beforeMount => mounted

beforeCreate：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：data | props | method | computed - 数据操作、数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。- 可以运行数据操作了，但还没有开始 DOM 渲染，$el 属性目前不可见
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

更新：beforeUpdate、updated

beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而请注意，在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
activated：keep-alive 组件激活时调用
deactivated：keep-alive 组件停用时调用