2024年最全浅谈Vue基础使用(1)，滴滴 hr面试

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

return createElement(“div”,{attrs:{id:‘#app’}},[

createElement(“h1”,{attrs:{id:“h”}},“1906”)

]);

}

});

浏览器反馈

看一看到，功能是实现了，但是和模板方法比起来，代码比较麻烦，比较生涩。

---

延迟挂载

用模板方法的时候，不写挂载点就像封装了函数但是不调用一样，是不会执行的，但是挂载的时间是可以变得，我们从下方代码看一下。

浏览器反馈

可以看到浏览器上边是什么也没有的

延迟加载也比较简单，只需要后续给他制定一下挂载点就可以了

app.$mount(“#app”);

这是我们再看一下浏览器反馈

注意点：

1. el挂载点 不能是body和 html，不然会报错

2. 当实例被挂载后，实例对象山过就会有一个$el 的属性 这个属性中存的内容就是挂载的元素

3. vue实例上的内置属性都是以 $ 或者 _ 开头的 ，所以data中的数据命名不要使用 $ 或者 _ 来开头

因为 Vue 解析 data 以后 会把当前data中的数据记载到 实例对象中

---

视图更新

相应数据的变化(数据来驱动视图)

数据的变化会自动更新视图(自动更新渲染模板)

准备一下代码

{{name}}

注意点：

这里没有写template但是在页面元素中用双花括号也可以！

浏览器反馈

然后我们在控制台调整一下数据后浏览器的反馈

上图我们是通过app.name去修改的，实际上$data里边也有一个name，所以通过app.$data.name也可以去修改，不过没有app.name方便，所以就不掩饰了

---

数据劫持

数据劫持，其实就是变相的数据监听

我们现在通过代码来看一下

{{name}}

浏览器反馈

然后我们继续去控制台修改数据

注意 只修改数据是不会渲染到页面的，我们需要在调用一下render函数

手动更新数据，然后手动去渲染，但是借用vue的话vue会帮我们自动化完成，vue在里边添加了监听的功能，监听数据每次发生改变就去调用一下渲染的方法

监听是怎么来的

有一个方法

Object.defineProperty();

这个方法就是帮我们监听某个对象中的某个属性（只能是单一的属性）

当这个属性发生改变时，我们去调用一些方法，这些方法以对象的方式传给我

代码示例

let $data = {x:1};

Object.defineProperty(obj,‘x’,{

set(newVale){

$data.x = newVale;

render();

},

get(){

return $data.x;

}

});

现在去控制台直接修改数据就可以渲染页面

问题： 无法对新增的属性进行监听(只能监听一个)

我们想处理他的话，只能在写一个监听

我们从新整理一下代码

{{name}}

浏览器反馈

---

视图更新的问题

刚才我们说了，事件监听只能监听某个对象里的某一个属性，并不能监听多个属性

然后我们现在看一种情况

x:{{obj.x}}

y:{{obj.y}}

浏览器反馈

直接修改x值在修改y值是不会渲染页面的

但是先修改y的值，在修改x的值，就会触发监听并渲染页面

但我们通过一个方法就可以了

app.$set(app.obj,“y”,2)

浏览器反馈

并且可以直接修改y的值

现在他们之间的监听就是各自修改各自的值

这个方式就相当于把Object.defineProperty()再写一遍

但是方便很多

---

扩展

通过Object.defineProperty()监听拦截会存在一些问题

1. 属性新增属性

2. 数组的方法：push / pop / shift / unshift / splice / sort reverse

3. 数组新增值：[]

4. 数组length属性

以上的操作中并不会触发监听拦截

但是vue对数组中的push / pop 等方法进行重新包装，所以在vue中调用这些方法，可以对数组的修改进行监听拦截

我们通过代码来看

x:{{obj.x}}

y:{{obj.y}}

{{arr}}

浏览器反馈

我们可以看到数组已经添加到页面了，然后我们在控制台对它做出调整

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。