本文详细介绍了Vue中数据的更新与响应式原理，包括data、propsData、methods的使用，以及如何通过set、$set、$forceUpdate、delete、$delete进行数据更新和删除。还探讨了Vue的更新生命周期、nextTick函数以及watch和computed的监听机制。
数据:
data：
在vue实例中的一个对象，用于存储数据。可在渲染的html中进行调用。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vueTest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test">
<p>test: {
{message}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var test = new Vue({
el: '#test',
data:{
message: 'Hello Vue!'
}
});
console.log(test)
</script>
</body>
</html>代表数据的data对象中的属性message在html中通过{ {message}}调用，渲染显示。
数据内的属性在vue实例中的属性中。
数据data可以直接用对象表示之外，还可以用函数返回的一个对象表示，代码如下：
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: '#test',
data(){
return {
message: 'Hello Vue!'
}
},
});
</script>
两者的区别在于，对象的话，是直接返回对象本身，如果是多次调用的话，每个vue实例的数据就会是同一个对象。而函数的话，是通过调用同一个函数返回不同的数据对象，多次调用的话，每个vue实例的数据对象都会是独立的。
propsData：
除了data存储数据外，propsData也可以用于数据的存储。不过，只用于 new 创建的实例中。而且需要有props属性配合接收。主要作用是方便测试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vueTest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test">
<p>test: {
{message}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var Comp = Vue.extend({
props: ['msg'],
template: '<div>hello ,{
{ msg }}</div>'
})
var vm = new Comp({
el: '#test',
propsData: {
msg: 'propsData'
}
})
// console.log(test)
</script>
</body>
</html>
方法:
加入methods对象，对象内的每个属性都是函数，可以html或者vue实例中直接调用。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vueTest</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="test">
<p>test: {
{message}}</p>
<button v-on:click='helloMethods'>helloMethods</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var test = new Vue({
el: '#test',
data:{
message: 'Hello Vue!'
},
methods: {
helloMethods: function(argument) {
this.message = 'Hello methods!';
}
}
});
</script>
</body>
</html>
使用v-on:click，将事件和节点绑定在一起。点击文本，就会触发函数。
methods中的函数，在vue实例中也可以找到。
数据与更新:
在上面的案例中，可以看到，只是单纯地更改数据，dom节点上的内容就会跟着改变，这是vue地响应式数据。数据的改变会更改相应地dom，触发生命周期中的更新。
<script type="text/javascript">
Vue.config.productionTip = false;
var test = new Vue({
el: '#test',
data:{
message: 'Hello Vue!'
},
methods: {
helloMethods: function(argument) {
this.message = 'Hello methods!';
}
},
beforeUpdate: function(){
console.log('更新之前');
},
updated: function(){
console.log('更新');
},
});
</script>
触发了更新相关的函数。
数据更新相关:
如果数据是数组的话，数据虽然会改变发生变化，但是相应地dom就不会变化了。代码如下：
change: function(argument) {
console.log('函数 change');
++ this.array[0];
console.log(this.array[0]);
},
可以看到，虽然函数被触发了，数组内的数据也改变了，但是dom上的元素没有被改变，更新的生命周期也没有触发，并没有响应式地与数据保持一致，变成'changed!'。
set、$set:
使用set可以更改相关的数据，并且实现响应式。可以使用实例对象的$set函数，或者Vue的set函数，而eset函数接收三个参数，一个参数是被改变的数组或者对象；第二个参数是对应地属性；第三个参数是改变之后的结果。
实例$set:
$setChange: function(argument) {
console.log('函数 $setChange');
最低0.47元/天 解锁文章
扫一扫
3759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
