目录

1. 面试题总结 

1.1 public和assets区别

1.2 vite的作用

1.3  vue单页面应用

1.4 组件分为两种类型：

1.5 App.vue文件

1.6 main.js

1.7 vue2中为什么不能直接监听到数组的改变？

2. .vue页面的组成

3. ref 响应式数据

---

1. 面试题总结 

1.1 public和assets区别

1. 两者都是放静态文件的，只是放在public中的静态资源最终使用vite打包项目的时候是不会被vite处理的，里面放的什么文件，打包后还是什么文件，vite直接原样打包。 而assets中的静态文件是要经过vite编译压缩的，vite会对它内部的静态资源处理。
2. 一般自己封装的css、js等静态资源文件放在assets中。第三方压缩过后的静态资源放在public中，比如：bootstrap.min.js、jQuery.min.js等，这些都压缩过了，无需再压缩。当然都放在assets中也可以，但不要都放在public中。

1.2 vite的作用

     因为vue是基于组件化模式开发的单页面应用，文件后缀以.vue结尾。浏览器并不能识别这种文件，浏览器只能加载.html .js .css文件。因此需要一个工具将.vue文件编译成浏览器能加载的.html .js .css文件，vite就是构建项目的编译工具。转换代码只是其中一个功能，还有以下功能：

1. 压缩静态文件 ：.js .css都会被vite压缩，减少项目代码体积，更轻量化，项目上线到服务器之后，由于代码体积小，前端加载速度更快：
2. vite内置了测试服务器：提供了一个本地服务器，用来调试代码；实时编译代码；配置跨域

1.3  vue单页面应用

       因为vue设计是基于组件化开发的，这些组件通过不同的方式展示到index.html这唯一的一个页面中，从而完成项目布局，组件可以理解为代码片段，是一种封装的思想，将不同功能模块的代码封装到一个.vue文件中方，这个文件就称为组件。

1.4 组件分为两种类型：

1.  路由组件：也叫页面组件，它是构成页面的重要组件，模拟多个.html页面之间的跳转就是靠这种组件，再搭配前端路由共同实现的；通过访问不同的前端路由地址，从而加载不同的页面。解决了传统的页面切换问题。
2. 公共组件：主要是将不同页面需要重复使用的标签结构单独封装成一个.vue文件，放在components文件夹中，其他页面导入即可使用，实现组件重用；

1.5 App.vue文件

       它是项目的根页面，项目启动时，这个根页面中的标签内容就已经被加载到了index.html中了，这个文件主要负责加载其他的路由组件，他内部必选配置<RouterView />。所以模拟页面间的跳转，实际上就是在App.vue内部完成的。

1.6 main.js

       main.js项目的入口文件，项目启动时，vite就是从这个文件开始加载项目的，在该文件内部，初始化了App.vue根组件。

1.7 vue2中为什么不能直接监听到数组的改变？

          vue2采用的是 Object.defineProperty进行对对象劫持实现响应式，正常对象中的属性是有限的，所以可以使用 Object.defineProperty进行迭代劫持，但是对于数组来说，数组中的元素可能是无限的，如果 Object.defineProperty也对数组中的每个元素进行劫持会非常浪费性能，所以为了避免不必要的性能浪费，vue2没有对数组中的每一项进行数据劫持。而是通过重写了处理数组的七种方法（push(),pop(),shift(),unshift(),splice(),sort(),reverse()）触发视图更新。

2. .vue页面的组成

.vue通常由三部分以下组成：

1. <template></template> 是用来包裹标签结构的，而且template是必须要写的。vue中约定template内部有且只能有一个根标签。
2. <style></style>在内部写组件样式，和css的语法规则一样。
3. <script>export default {}</script>在内部写入js相关代码。
4. export default {}表示导出一个配置对象，这个对象可以对当前组件实例进行配置。每一个.vue文件都对应一个vue实例对象。vue会产生这样一个对象，我们只需要配置该对象就好，vue会拿着这些配置初始化这个组件实例对象。
5. 在花括号内要写入setup函数，setup函数是每个组件必须要有的函数，他是组件的入口函数，组件创建时，就是从setup函数开始初始化执行的。它内部可以声明组件数据和方法。                                                                

<template><div><h1>home</h1></div>
</template>
<style></style>
<script>
export default {setup() {}  
}
</script>

3. ref 响应式数据

想要实现页面数据的响应式就需要先从 Vue 模块中导入 ref 对象。

import { ref } from "vue";

在setup方法中声明响应式数据时需要按照以下格式进行编写。响应式数据，它的目的是减少程序员操作dom的过程，操作dom由vue底层高效的实现dom操作。vue会监听到数据变化，从而更新dom。

 let num = ref(1);
let src = ref("/src/assets/icons/1.jpg");

在setup里面在使用ref声明的响应式数据时需要写.value   ref声明的变量，只在<script>中赋值取值需要通过.value进行。<template>模板中统统不需要使用.value，直接变量名即可。

  const addNum = () => {num.value++;console.log(num);};const clickOne = () => {src.value = "/src/assets/icons/1.jpg";};const clickTwo = () => {src.value = "/src/assets/icons/2.jpg";};

 最后需要将所需变量和方法使用return返出来。

 return {num,src,addNum,clickOne,clickTwo,clickThree};

 这样在页面对应位置引入的数据就可以实现响应式的效果了。

<template><div class="about"><h2>插值表达式：{{ num }}</h2><button v-on:click="addNum">num++</button><img v-bind:src="src" alt="" /><button @click="clickOne">img1</button><button @click="clickTwo">img2</button><button @click="clickThree">img3</button></div>
</template>

还可以利用ref来 操作dom。通过ref属性，给目标dom绑定变量，这个dom对象就会保存到hTag上。

<template><div><h4 @click="test" ref="hTag">通过REF操作dom</h4>
</template>
<style>
</style>
<script>
import { ref } from "vue";
import useImage from "@/hooks/userimage";
export default {setup() {// 利用ref操作domconst hTag = ref(null);const test = () => {hTag.value.style.color = "blue";};return {hTag,test,};}
};
</script>