Vue.js 响应式系统
Vue.js 响应式系统
响应式系统是Vue.js最具特色的功能之一。在Vue.js中，模型是普通的JavaScript对象。当我们必须修改模型时，视图将更新。这使状态管理变得简单而直观，但是了解它如何工作来避免一些常见的即将发生的问题也很重要。在这里，我们将看到如何使用反应性系统来解决这些问题。
它是如何工作的？
如果您通过普通的
JavaScript 对象
Vue.js 实例作为其数据选项，您将看到Vue.js通过其所有属性进行传递，并使用
Object.defineProperty 将它们转换为getter/setter。
JavaScript 对象
Vue.js 实例作为其数据选项，您将看到Vue.js通过其所有属性进行传递，并使用
Object.defineProperty 将它们转换为getter/setter。
这是一项不可填充的功能，并且仅支持ES5。由于此功能，Vue不支持IE8及更低版本。
吸气剂和设置器对用户不可见，但在幕后，它们使
Vue.js 能够在您必须更改或访问属性时执行依赖项跟踪和更改通知。您可以在浏览器的控制台上查看getter/setters属性的更改。如果要查看它们，则必须安装
vue-devtools 以提供更易于检查的界面。
Vue.js 能够在您必须更改或访问属性时执行依赖项跟踪和更改通知。您可以在浏览器的控制台上查看getter/setters属性的更改。如果要查看它们，则必须安装
vue-devtools 以提供更易于检查的界面。
每个组件实例都有一个相应的观察者实例。这用于将在组件渲染期间被"触摸"的属性记录为依赖项。此后，当依赖项的设置器被触发时，它将通知观察者，观察者依次重新渲染组件。
Vue.js反应性界面
Vue.js提供了向动态添加的属性添加反应性的选项。假设我们已经创建了Vue.js实例，并且想要添加监听属性。请参见以下示例:
示例:
Index.html文件:
<html>
<head>
<title>Vue.js Reactive Interface</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "reactivity_1">
<p style = "font-size:25px;">Counter: {{ counter }}</p>
<button @click = "counter++" style = "font-size:25px;">Click Here</button>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#reactivity_1',
data: {
counter: 1
}
});
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
setTimeout(
function(){
vm.counter = 10;
},1000
)
我们使用一个简单的CSS文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出:
输出:
当您单击"单击此处"按钮时，计数器将增加。您将看到弹出输出或警报消息，其中显示计数器属性的更改值。
单击"单击此处"按钮后，请查看以下输出。
示例说明
在上面的示例中，我们定义了一个属性计数器，该属性计数器在数据中设置为1目的。当您单击"单击此处"按钮时，计数器将增加。
创建
Vue.js实例，我们必须在其中添加监听属性。使用以下代码将其添加:
Vue.js实例，我们必须在其中添加监听属性。使用以下代码将其添加:
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});
我们已使用$ 监听属性在Vue实例外部添加监视。我们还添加了一个警报，用于显示counter属性的值更改。还添加了一个名为setTimeout的计时器函数，以将计数器值设置为10。
setTimeout(
function(){
vm.counter = 10;
},1000
);
每单击一次按钮，计数器都会更改，并且watch方法的警报也会被触发。
在运行时添加属性。
这是始终声明属性的最佳方法，因为在Vue.js实例中无法检测到属性的添加和删除，所以在Vue.js实例中需要对它们进行预先反应。时间，您必须使用
Vue全局，Vue.set 和
Vue.delete 方法。
Vue全局，Vue.set 和
Vue.delete 方法。
Vue.set
这用于在对象上设置属性。这是用来克服Vue.js无法检测到属性添加的限制。
语法
Vue.set( target, key, value )
在这里
target： 它可以是对象或数组。
key: 可以是字符串或数字。
value: 它可以是任何类型。
让我们举一个简单的例子来理解Vue.set的概念。
示例:
Index.html文件:
<html>
<head>
<title>Vue.js Reactive Interface</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "reactivity_1">
<p style = "font-size:25px;">Counter value: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Here</button>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var myproduct = {"id":1, name:"shirt", "price":"1000.00"};
var vm = new Vue({
el: '#reactivity_1',
data: {
counter: 1,
products: myproduct
}
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
})
程序执行后，您将看到以下输出:
输出:
在这里，您将看到每次单击" Click Here"按钮时计数器值都会增加。请参阅以下输出。在这里，我们单击了5次按钮。
示例说明
在上面的示例中，我们首先使用以下代码创建了一个名为
myproduct 的变量:
myproduct 的变量:
var myproduct = {"id":1, name:"shirt", "price":"1000.00"};
它被赋予Vue.js实例中的数据对象，如下所示:
var vm = new Vue({
el: '#reactivity_1',
data: {
counter: 1,
products: myproduct
}
});
假设，在创建Vue.js实例之后，您必须向
myproduct 数组中再添加一个属性。您可以通过使用以下代码来做到这一点:
myproduct 数组中再添加一个属性。您可以通过使用以下代码来做到这一点:
vm.products.qty = "1";
如果您在控制台上看到输出，则将在产品列表中找到该数量，然后添加数量。 get/set方法(基本上增加了反应性)可用于id，名称和价格，而不适用于数量。
因此，您可以看到仅添加就不能实现反应性Vue对象。在Vue.js中，您必须首先创建其所有属性。如果您以后想要这样做，我们可以使用Vue.set。请参阅另一个示例，该示例稍后会添加所有属性。
示例:
Index.html文件:
<html>
<head>
<title>Vue.js Reactive Interface</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "reactivity_1">
<p style = "font-size:25px;">Counter value: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Here</button>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var myproduct = {"id":1, name:"shirt", "price":"1000.00"};
var vm = new Vue({
el: '#reactivity_1',
data: {
counter: 1,
products: myproduct
}
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
})
在上面的示例中，我们使用Vue.set通过以下代码向数组添加了数量:
Vue.set(myproduct, 'qty', 1);
如果在控制台上运行此示例，您将看到使用Vue.set方法添加了数量的获取/设置。
Vue.delete
Vue.delete函数用于动态删除属性。这也用于克服Vue.js无法检测到属性删除的限制。
语法:
Vue.delete( target, key )
在这里
target: 它用于指定对象或数组。
key: 用于指定字符串或数字。
让我们看一个示例，演示如何使用Vue.delete函数在Vue.js中动态删除任何属性。
示例
Index.html文件:
<html>
<head>
<title>Vue.js Reactive Interface</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "reactivity_1">
<p style = "font-size:25px;">Counter value: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">Click Here</button>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var myproduct = {"id":1, name:"shirt", "price":"1000.00"};
var vm = new Vue({
el: '#reactivity_1',
data: {
counter: 1,
products: myproduct
}
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
alert('Counter is incremented :' + oval + ' to ' + nval + '!');
})
在上面的示例中，我们使用Vue.delete函数通过使用以下代码从数组中删除价格:
Vue.delete(myproduct, 'price');
当您在控制台上看到以上示例的输出时，您会看到删除价格后，在控制台上仅可见id和name。我们还将注意到get/set方法被删除了。