1.基础的了解

本人也是从事前端的一个开发工作的，也会有用到vue的一些项目，这里就来说说面试时候的一些问题吧。

代码如下

<template>
  <div>
    <div ref="divR" class="aC" @click="changeF"></div>
    <p v-if="clientHeight">{{clientHeight}}</p>
  </div>
</template>

<script>
  import { ref,watchEffect,onMounted  } from 'vue';
  
  export default {
    props: {
    },
    data() {
      return {
      }
    },
    setup(props,context) {
      
      const divR = ref(null);
      const clientHeight = ref(0);
      
      watchEffect(() => {
        // 侦听模板引用
        clientHeight.value = divR.value.clientHeight;
      },{
        // 使用flush: 'post' 确保模板引用与 DOM 保持同步，并引用正确的元素
        flush: 'post'
      })
      
      return {
        clientHeight,
        divR, // 在setup中暴露 divR，并通过 ref="divR"，将其绑定到 div 作为其 ref
      }
    },
    methods: {
      changeF() {
        this.clientHeight = (this.divR.clientHeight * Math.random()).toFixed(0);
      }
    }
  }
</script>

<style scoped>
  .aC {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>

1、Vue有下列哪几种功能【多选题】(2分)ABCD

A、解耦视图和数据 B、可复用的组件

C、数据绑定 D、功能插件化

2、Vue插值用下列那个符号(2分)C

A、《》 B、<>

C、{{}} D、（）

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。

转载链接：https://www.jianshu.com/p/91416e11f012

在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的基础。

Vue3从2020年9月发布到现在也有3年多的时间，这期间相信各大企业先后陆续都会在新项目的选择上从Vue2转到了Vue3开发，原因毫无疑问两个方面的改变

作者：jerryWu

转发连接：https://juejin.im/post/5ec48f84e51d45788266753a

pdf.js实战，含水印、电子签章解决方案

项目涉及到移动端查看电子合同的问题，前前后后试了三种方案，真是一步一个坑，三种方案各有各的优点，不水，直接上代码，按照自己的需求选择。

前言

D3近年来一直是JavaScript最重要的数据可视化库之一，在创建者Mike Bostock的维护下，前景依然无量，至少现在没有能打的:

• D3与众多其他库的区别在于无限定制的能力（直接操作SVG）。
• 它的底层API提供对原生SVG元素的直接控制，但它也带来了高学习曲线的成本。
• 我们将把D3和Vue结合在一起 - 使用Vue的动态数据绑定，清晰的语法和模块化结构，可以充分发挥D3的最佳性能。 根据广泛定义，D3可拆分为以下几种分库：

本篇文章干货较多，建议收藏！

从 vue2 升级到 vue3，vue3 是可以兼容 vue2 的，所以 vue3 可以采用 vue2 的选项式API。由于选项式API一个变量存在于多处，如果出现问题时，就需要去多个函数内检查，项目较大时，遇到问题，增加排故的难度。所以 vue3 中新增了 setup 配置项，用它来写组合式API。

onMounted()是Vue3.2中的一个生命周期钩子，用于在组件挂载后执行一些操作。

onMounted()生命周期钩子的用法和作用如下：

1. 在setup()函数中使用onMounted()生命周期钩子，可以在组件挂载后执行一些初始化操作，比如获取数据、绑定事件等。

在Vue3.2和以上版本中，onUnmounted是一个生命周期钩子函数，它会在组件实例卸载之后被调用。它的作用和onBeforeUnmount类似，主要用于在组件卸载后清理一些资源，避免内存泄漏或者不必要的计算。

下面是一个使用script setup语法的例子，展示了如何在组件卸载后清除定时器：

<script setup>
import { ref, onUnmounted } from 'vue'

const count = ref(0)
const timer = ref(null)

const startTimer = () => {
  timer.value = setInterval(() => {
    count.value++
  }, 1000)
}

const stopTimer = () => {
  clearInterval(timer.value)
}

onUnmounted(() => {
  stopTimer()
})
</script>

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="startTimer">开始计数</button>
    <button @click="stopTimer">停止计数</button>
  </div>
</template>