Vue进阶（九十七）：对象动态添加属性和值_vue给对象动态添加属性和值的实例(1)

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

文章目录

• • 一、背景
    • 二、基础知识
    • 三、示例代码
    • 四、拓展阅读

---

一、背景

Vue规定不允许直接修改props或者data属性，必须使用Vue.set方法。

Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的，该方法可以确保属性被创建后也是响应式的，同时触发视图更新。

二、基础知识

注：修改的对象必须为响应式对象，且操作响应式对象的属性也必须是响应式的，能够触发视图更新。否则浏览器JS将无法解析，从而报错。

三、示例代码

目的：定义一个列表数据，通过2个不同的按钮来控制列表数据。

// 1. 首先在页面导入Vuejs文件库
import Vue from 'vue'
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button class="btn" @click="btn2Click()">动态赋值</button><br/>    
    <button class="btn" @click="btn3Click()">为data新增属性</button>
</div>
<script>
export default {
 data () {
 items:[
 {message:"Test one",id:"1"},
 {message:"Test two",id:"2"},
 {message:"Test three",id:"3"}
 ]
 },
 methods:{
 btn2Click:function(){
 Vue.set(this.items,0,{message:"Change Test",id:'10'})
 },
 btn3Click:function(){
 var itemLen=this.items.length;
 Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
 }
 }
});
</script>
## Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…
![](https://img-blog.csdnimg.cn/img_convert/e5bf77b01238e2306dcf5ec74f54ee7f.webp?x-oss-process=image/format,png)

## 算法

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    ...
    ![](https://img-blog.csdnimg.cn/img_convert/faf19b3d6bb3d86d881e4b13059ba3b3.webp?x-oss-process=image/format,png)

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666



R8UIYD-1715840237486)]

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666