web前端面试高频考点——Vue3.x深入理解(v-model参数用法、watch和watchEffect区别、Vue3快于Vue2、Vite启动快的原因)

简介: web前端面试高频考点——Vue3.x深入理解(v-model参数用法、watch和watchEffect区别、Vue3快于Vue2、Vite启动快的原因)

一、v-model 参数的用法

1、Vue2.x 的 .sync

在一个包含 title prop 的组件中,我们可以用以下方法表达对其赋新值的意图

普通写法:

this.$emit('update:title', newTitle)
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
>
</text-document>

.sync 修饰符(简写):

<text-document v-bind:title.sync="doc.title"></text-document>

2、Vue3.x的 v-model:title=“xxx”

若要更改 model 名称,而不是更改组件内的 model 选项,那么可以将一个 arguments 传递给 model

<ChildComponent v-model:title="pageTitle"></ChildComponent>
<!-- 是以下的简写 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event"></ChildComponent>

示例:

index.vue 父组件

<template>
  <p>{{ name }} {{ age }}</p>
  <UserInfo
    v-model:name="name"
    v-model:age="age"
  >
  </UserInfo>
</template>
<script>
import { reactive, toRefs } from 'vue'
import UserInfo from './UserInfo.vue';
export default {
    name: 'VModel',
    components: {UserInfo},
    setup() {
        const state = reactive({
            name: '杂货铺',
            age: '20'
        })
        return toRefs(state)
    }
};
</script>

UserInfo.vue 子组件

  • v-bind 绑定属性的 value
  • 监听 input 框内值的更新
<template>
  <input :value="name" @input="$emit('update:name', $event.target.value)">
  <input :value="age" @input="$emit('update:age', $event.target.value)">
</template>
<script>
export default {
    name: 'UserInfo',
    props: {
        name: String,
        age: String
    }
};
</script>

9e572671dfec4949a33013d0b52eefca.png9f7bd21ee8c5471db79e196ede27337d.png


二、watch 和 watchEffect 的区别

  • 两者都可监听 data 属性变化
  • watch 需要明确监听哪个属性
  • watchEffect 会根据其中的属性,自动监听其变化

1、watch 监听(vue2.x)

(1)示例:watch 监听 值 的变化

  • 第一个参数是要监听的属性
  • 第二个参数是新旧值
  • 第三个参数是初始化之前就监听(可选参数)
<template>
  <p>watch vs watchEffect</p>
  <p>{{ numberRef }}</p>
</template>
<script>
import { ref, toRefs, watch} from 'vue'
export default {
    name: 'Watch',
    setup() {
      // 定义值类型
        const numberRef = ref(100)
    // watch 监听
        watch(numberRef, (newNumber, oldNumber) => {
            console.log('ref watch', newNumber, oldNumber);
        })
    // 定时器,修改 numberRef 的值,用于监听
        setTimeout(() => {
            numberRef.value = 200
        }, 1000)
        return {
            numberRef,
        }
    }
};
</script>

watch 监听可选的第三个参数

immediate: true // 初始化之前就监听,可选


2f72275cdda34854bf5f77d743a330cd.png

a27007f1a00b4ec889259e27f57fd3a1.png

(2)示例:watch 监听 对象 的变化

<template>
  <p>watch vs watchEffect</p>
  <p>{{ name }} {{ age }}</p>
</template>
<script>
import { reactive, toRefs, watch} from 'vue'
export default {
    name: 'Watch',
    setup() {
        const state = reactive({
            name: '杂货铺',
            age: 21
        })
        watch(
            // 第一个参数,确定要监听哪个属性
            () => state.age,
            // 第二个参数,回调函数
            (newAge, oldAge) => {
                console.log('state watch', newAge, oldAge);
            },
            // 第三个参数,配置项,可选
            {
                immediate: true, // 初始换之前就监听,可选
                deep: true // 深度监听
            }
        )
        setTimeout(() => {
            state.age = 25
        }, 3000)
        setTimeout(() => {
            state.name = '前端杂货铺'
        }, 5000)
        return {
            ...toRefs(state)
        }
    }
};
</script>

05fced64a960407a9412c68245df9b1d.png243de2517887428c9387bd493bf030d7.pngcc600ed0e0994e9096352d4541dd6841.png

2、watchEffect 监听(Vue3.x)

示例:watchEffect 监听对象变化

<template>
  <p>watch vs watchEffect</p>
  <p>{{ name }} {{ age }}</p>
</template>
<script>
import { reactive, toRefs, watchEffect} from 'vue'
export default {
    name: 'Watch',
    setup() {
        const state = reactive({
            name: '杂货铺',
            age: 21
        })
        // 初始化时,一定会执行一次(收集要监听的数据)
        watchEffect(() => {
            console.log('hello watchEffect');
        })
        // 监听 state.name
        watchEffect(() => {
            console.log('state.name', state.name);
        })
        // 监听 state.age
        watchEffect(() => {
            console.log('state.age', state.age);
        })
        setTimeout(() => {
            state.age = 25
        }, 1500)
        setTimeout(() => {
            state.name = '前端杂货铺'
        }, 3000)
        return {
            ...toRefs(state)
        }
    }
};
</script>

3104ddcedc384f0096f3cc10701e1ca7.png8958fd25c3d244e2aebd1f4a79e8a524.pngdb619b98e4d743c9ab998652e5853afa.png

3、watch 和 watchEffect 的区别

  • 两者都可监听 data 属性变化
  • watch 需要明确监听哪个属性
  • watchEffect 会根据其中的属性,自动监听其变化

三、在 setup 中如何获取组件实例

  • 在 setup 和其他 Composition API 中没有 this
  • 可通过 getCurrentInstance 获取当前实例
  • 若使用 Options API 可照常使用 this

示例:使用 getCurrentInstance 获取当前实例

<template>
  <p>setup中获取组件实例</p>
</template>
<script>
import { getCurrentInstance, onMounted } from 'vue';
export default {
    name: 'GetInstance',
    data() {
        return {
            x: 1
        }
    },
    setup() {
        // Composition API 没有 this => undefined
        console.log('this1', this);
        // 获取当前实例
        const instance = getCurrentInstance()
        console.log('instance', instance);
        // 挂载完成 => 通过 instance.data.x 获取 x 的值
        onMounted(() => {
          // 挂载完也没有 this => undefined
            console.log('this in onMounted', this);
            console.log('x', instance.data.x);
        })
    },
    // vue2.x 中有 this,能直接取到值
    mounted() {
        console.log('this2', this);
        console.log('x', this.x);
    }
};
</script>

8614818da9e8475a93ae913d9790f393.png

四、Vue3 为何比 Vue2 快

  • Proxy 响应式
  • PatchFlag
  • hoistStatic
  • cacheHandler
  • SRR 优化
  • tree-shaking

1、PatchFlag

  • 编译模板时,动态节点做标记
  • 标记,分为不同的类型,如 TEXT PROPS
  • diff 算法时,可以区分静态节点,以及不同类型的动态节点

测试地址:PatchFlag测试

237fbde108b14bb39d70f97f148074d4.pngVue2.x 与 Vue3.x diff 算法的部分区别:

出处:https://coding.imooc.com/lesson/419.html#mid=41996

2、hoistStatic

  • 将静态节点的定义,提升到父作用域,缓存起来
  • 多个相邻的静态节点,会被合并起来
  • 典型的拿空间换时间的优化策略

Options 打开 hoistStatic:

3、cacheHandler

  • 缓存事件

4、SSR 优化

  • 静态节点直接输出,绕过了 vdom
  • 动态节点,还是需要动态渲染

5、tree shaking

  • 编译时,根据不同的情况,引入不同的 API

需要什么就引入什么:

五、Vite 为何启动快?

  • 开发环境使用 ES6 Module,无需打包 —— 非常快
  • 生产环境使用 rollup,并不会快很多

示例:ES Module 在浏览器中的使用

print.js 文件

export default function (a, b) {
    console.log(a, b)
}

add.js 文件

import print from './print.js'
export default function add(a, b) {
    print('print', 'add')
    return a + b
}

test.html

  • script 标签中要使用 type="module"
  • 导入所需文件
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES Module demo</title>
</head>
<body>
    <p>基本演示</p>
    <script type="module">
        import add from './src/add.js'
        const res = add(1, 2)
        console.log('add res', res)
    </script>
</body>
</html>

9298033f20534633b04f64a7da4fd4b5.png

六、Composition API 和 React Hooks 对比

  • 前者 setup 只会被调用一次,而后者函数会被多次调用
  • 前者无需 useMemo useCallback,因为 setup 只调用一次
  • 前者无需顾虑调用顺序,而后者需要保证 hooks 的顺序一致

不积跬步无以至千里 不积小流无以成江海

点个专注不迷路,持续更新中…

相关文章
|
13天前
|
Java 程序员 调度
Java 高级面试技巧:yield() 与 sleep() 方法的使用场景和区别
本文详细解析了 Java 中 `Thread` 类的 `yield()` 和 `sleep()` 方法,解释了它们的作用、区别及为什么是静态方法。`yield()` 让当前线程释放 CPU 时间片,给其他同等优先级线程运行机会,但不保证暂停;`sleep()` 则让线程进入休眠状态,指定时间后继续执行。两者都是静态方法,因为它们影响线程调度机制而非单一线程行为。这些知识点在面试中常被提及,掌握它们有助于更好地应对多线程编程问题。
45 9
|
18天前
|
安全 Java 程序员
Java面试必问!run() 和 start() 方法到底有啥区别?
在多线程编程中,run和 start方法常常让开发者感到困惑。为什么调用 start 才能启动线程,而直接调用 run只是普通方法调用?这篇文章将通过一个简单的例子,详细解析这两者的区别,帮助你在面试中脱颖而出,理解多线程背后的机制和原理。
47 12
|
16天前
|
编译器 Android开发 开发者
Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
Lambda表达式和匿名函数都是Kotlin中强大的特性,帮助开发者编写简洁而高效的代码。理解它们的区别和适用场景,有助于选择最合适的方式来解决问题。希望本文的详细讲解和示例能够帮助你在Kotlin开发中更好地运用这些特性。
28 9
|
18天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
45 10
|
2月前
|
Java
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
今日分享的主题是如何区分&和&&的区别,提高自身面试的能力。主要分为以下四部分。 1、自我面试经历 2、&amp和&amp&amp的不同之处 3、&对&&的不同用回答逻辑解释 4、彩蛋
|
3月前
|
Java 程序员
Java社招面试题:& 和 && 的区别,HR的套路险些让我翻车!
小米,29岁程序员,分享了一次面试经历,详细解析了Java中&和&&的区别及应用场景,展示了扎实的基础知识和良好的应变能力,最终成功获得Offer。
103 14
|
2月前
|
Java 关系型数据库 数据库
京东面试:聊聊Spring事务?Spring事务的10种失效场景?加入型传播和嵌套型传播有什么区别?
45岁老架构师尼恩分享了Spring事务的核心知识点,包括事务的两种管理方式(编程式和声明式)、@Transactional注解的五大属性(transactionManager、propagation、isolation、timeout、readOnly、rollbackFor)、事务的七种传播行为、事务隔离级别及其与数据库隔离级别的关系,以及Spring事务的10种失效场景。尼恩还强调了面试中如何给出高质量答案,推荐阅读《尼恩Java面试宝典PDF》以提升面试表现。更多技术资料可在公众号【技术自由圈】获取。
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
280 14
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
82 0
|
4月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。