vue底层知识点（vue前端面试题）

vue树形结构的实现--拖拽篇(1)

1、这里拖拽完没有判断每一行是否填充满且拖拽后有模块会被覆盖导致出现空白区域，如下：我们需要增加校验，校验每一行是否填充满 校验函数 思路的话就是我在函数上的注释。

2、相比及 vuedraggable 来说， awe-dnd 是没有暴露双向绑定的方式，因此提供了事件，在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件。

3、首先进行异步加载。其次进入手风琴模式。然后保存已加载的选中的节点keys，未加载的子节点不保存，页面初始化时设置选中的keys。最后匹配时根据节点的绝对路径进行匹配即可。

4、该div元素应设置draggable=true属性来标识该元素可拖拽。为该div元素添加一个v-on：dragstart监听事件，该事件函数接收一个event参数。

5、这个构想实际上来源于一个全选的组件；即一开始的目的是做一个全选组件，然后在完成的时候被告知可能有多层级列表的情况；由于项目所用的vux组件库没有tree这个组件；于是干脆想着改造一下尝试实现一个tree结构。

6、近用Vue3写了个用于拖拽调整位置和大小的的组件，同时支持 冲突检测，元素吸附对齐，实时参考线 等特性。

TypeScript在Vue3.0的Ref类型中的实践

要让 TypeScript 正确推断 Vue 组件选项中的类型，需要使用 defineComponent 全局方法定义组件。参考文档 引用第三方库时，如果第三方类库并没有 ts 的 .d.ts 类型的声明文件，则无法在项目中正常使用。

比如下面这种写法，直接放在了save方法中，是不行的 在vue3的setup中可以使用ref变量的方式或者getCurrentInstance两种方式来使用Ref，从使用方便的程度上来看，更加推荐使用ref变量的方式。

另外，Vue3支持 Typescript 语法编程也是其中一大亮点，为了 探索 新技术的工程化搭建，本文会把Typescript、vite、pinia等官方周边整合到工程里面。

ref 加在普通元素上，用this.$refs.name 获取到的是dom元素 ref 加在子组件上，用this.$refs.name 获取到的是 组件实例，可以使用组件的所有方法 。

Vuex 没有为 this.$store 属性提供开箱即用的类型声明。如果你要使用 TypeScript，首先需要声明自定义的 模块补充(module augmentation) 。

理解VUE2双向数据绑定原理和实现

vue的数据双向绑定是通过数据劫持和发布－订阅者功能来实现的。实现步骤：实现一个监听者Oberver来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者。

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，其中比较关键的是数据劫持，下面咱们看一个例子。

因为 view 更新 data 其实可以通过事件监听即可，比如 input 标签监听 input 事件就可以实现了。而数据更新视图的重点是如何知道数据变了，只要知道数据变了，那么接下去的事都好处理。

为什么学习Vue框架??

1、我们学习Vue的成本低，因为它的一个模板语法是基于HTML的，如果说你有HTML的一个基础，可以很快的去上手Vue的框架。

2、Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。

3、所谓渐进式框架的意思就是你可以根据项目的实际情况一步一步利用Vue.js提供的功能构建你的应用。Vue是web前端快速搭建网站的框架之一。

4、近两年前端技术变革速度太快，vue不论针对web项目开发，网站制作，还是app，小程序开发，都越来越流行，其便捷性及易用程度都让你不得不考虑去学习。

5、vue是一个轻量级，学习成本低，使用方便的前端框架。vue的运行速度快，数据和结构分离，插件化，很多网站都用vue来进行搭建。因此学习vue是一个好的选择。但vue的缺点是不支持IE8以下的浏览器，需要根据项目用途进行考虑。

想学vue.js框架,需要具备哪些知识基础

1、基础的前端知识，如HTML，CSS，Javascript知识。最好再了解一下MVVM概念。当然在学习中了解也可以。总之，学习VUEJS之前，先学习好HTML，CSS，Javascript就可以了。

2、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vue.js 是构建客户端应用程序的框架。

3、学vue框架之前，那么对JavaScript和HTML，CSS都要有一定的了解，甚至可以说都要会才行。不然学VUE的时候会很吃力，因为大部分都是Javascipt相关的知识点。

为什么说Vue是渐进式框架?

简单地说，渐进式的概念是分层设计，每层可选，不同层可以灵活接入其他方案架构模式。举个例子，我们要买一台电脑，店家给我们提供了一个IBM。官方可能会提供windows作为可选，我们也可以在电脑上安装我们自己喜欢的Ubuntu。

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

这是是一套构建用户界面的渐进式框架，相对于Angular.js要容易学，虽然主流是Angular.js但现在还是有一部分公司在用的。对于某些问题来讲用 Vue 解决会更好，但凡事没有更好，只有更适合。

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。Vue是一套用于构建用户界面的渐进式框架。Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，易上手，便于和第三方库或既有项目整合。

Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。