学习笔记

vueJs

Vue.js 监听属性 watch

项目案例：当用户输入事件触发,tableFormTableDataChange数值改变，调用其回调函数

data:{
  retrun {
    tableFormTableDataChange: 0
  }
}
watch: {
  'tableFormTableDataChange': function () { // 监听表格数据变化
     const tableFormTableData = this.tableForm.tableData
     let totalPurchaseAmount = 0
     tableFormTableData.forEach(item => {
       if (item.amount) {
         totalPurchaseAmount += Number(item.amount)
     }
     this.$set(this.contractForm, totalPurchaseAmount,Number(totalPurchaseAmount.toFixed(2)))
   })
}
methods:{
  用户输入触发事件：{
    this.tableFormTableDataChange +=1
  }
}

参考文章

总结：
1.使用 watch 来实时监听属性变化
2.键值形式 键是data中的需要监听的数据 值是一个回调函数
3.键发生变化时，就是调用回调函数

Vue.js this.$set

参考文章

总结：
1.如果data对象里面的数组、对象实例数据创建之后，其属性数值变化或者增添、删除属性,不会触发视图更新
2.属性必须在 data 对象上它才是响应的,不允许动态添加根级响应式属性。
3.this.$set和Vue.set原理几乎是一样的
4.this.$set的作用就是动态添加更新响应式属性
使用方法
this.$set(Array,"key",newValue)
this.$set(object, "propertyName", newValue)

路由 route 和 router

参考文章

Vuex状态管理器

参考文章

VueJs(ref和$refs的使用)

参考文章
总结：

1.ref相当于是给Dom元素起别名，这个是唯一的
2.可以通过$refs.别名来获取到整个Dom元素
3.子组件中的ref会注册到父组件的refs中，可以通过vm属性查看，父组键可以通过this.$refs.子组件的ref来访问子组件

父子组件通信

参考文章
总结：

1.父组件通过this.$refs来访问子组件
2.父组件通过子组件定义的props属性结合 v-bind 来传递数据给子组件
3.子组件可以通过this.$emit传递事件给父组件，父组件通过v-on来监听

vue中$forceUpdate()的使用 参考文章