详解vue2中的this

使用 this.$set 的语法如下：

this.$set(object, key, value)

其中，object 是要设置属性的对象，key 是要设置的属性名，value 是要设置的属性值。

默认情况下，Vue.js 的响应式系统会在初始化时对数据对象进行递归地劫持，使其成为响应式的。这意味着当你直接给一个已经存在的属性赋值时，Vue 会自动检测到这个变化并更新视图。但是，对于新增加的属性，Vue 无法自动追踪变化，这时就需要使用 this.$set 来手动将新增的属性转换为响应式。

下面是一个示例，演示如何在 Vue 实例中使用 this.$set：

// 在 Vue 实例的数据对象中添加一个新属性
this.$set(this.dataObject, 'newProperty', 'new value');

在上面的示例中，我们通过 this.$set 方法向 dataObject 对象和组件的响应式属性中添加了一个新的属性 newProperty，并为其赋值为 ‘new value’。这样做可以确保 newProperty 是响应式的，当其值发生变化时，相关的视图也会更新。

需要注意的是，this.$set 只能用于在响应式对象上设置属性。不能直接给vue实例中的data设置属性，错误示范：

this.$set(this.$data, 'newProperty', 'new value');

控制台报错：vue.js:634 [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

官网也写了注意事项：

值得一提的是，直接给data中的对象赋值为一个对象，那么对象身上的属性值也是具有响应式的。

new Vue({
  data() {
    return {
      myObject: {} // 将对象属性初始化为空对象
    }
  },
  mounted() {
  	// Vue.set(this.myObject,'sex','男') // 生效，响应式
	// this.$set(this.myObject,'sex','男') // 生效，响应式
	// this.myObject.sex = '男' // 不生效，非响应式
    this.myObject = {
      name: 'John', // 直接给对象赋值为另一个对象，生效，响应式


### 最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

*   技术要深入到什么程度？

*   做久了技术总要转型管理？

*   我能做什么，我想做什么？

*   **一技之长，就是深耕你的专业技能，你的专业技术。**（重点）

*   独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

*   拥有事业，选择一份使命，带领团队实现它。（创业）

**一技之长分五个层次**

*   栈内技术 - 是指你的前端专业领域技术

*   栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

*   工程经验 - 是建设专业技术体系的“解决方案”

*   带人做事 - 是对团队协作能力的要求

*   业界发声 - 工作经验总结对外分享，与他人交流



> 永远不要放弃一技之长，它值得你长期`信仰持有`。



> 主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

![](https://img-blog.csdnimg.cn/img_convert/44bc3d1e2743a7cf1e94e28026aedf8d.png)