vue.js组件改变了数据，但是dom并没有刷新

Posted 2023-05-02

参考技术A

由于 javascript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)

vue.js核心思想

1、数据驱动（基于操作 dom 的方式）
（1）、Dom 是数据的一种自然映射（双向数据绑定）手动改变 DOM 非常麻烦使用vue.js之后，只需要改变数据，通过改变 Directives 指令,当数据发生变化，会通过数据指令去修改对应的 DOM
（2）、Vue.js 还会对事件进行一定的监听，当我们改变视图（view）的时候通过 DOM Listeners 来改变数据
通过以上两点就实现了数据的双向绑定

2、组件化
Vue-cli:(它是 vue 的脚手架工具)
作用：帮助我们完成基础的代码（包括：目录结构、本地调试、代码部署、热加载、单元测 试）

页面上每一个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护 展示面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。