Vue reactivity system allows you to create new property dynamically.Let us consider the following example, in which vue instance is already created and need to add watch property.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvreact>
<p>cntr:{{cntr}}<p>
<p><button @click="cntr++">Press me<button>
<div>
<script type=text/javascript>
var vm = new Vue({
el:"#dvreact",
data:()
{
cntr:1
},
methods:{
},
});
vm.$watch('countr',function(nval,oval){
alert('cntr incremented' + oval + 'to' +nval);
}
);
setTimeout({
function(){
vm.cntr=20;
},2000
});
<script>
<body>
<html>
The counter property defined in data object.This counter is increased when we click the button.Here watch is added outside the vue instance.For every 2 milliseconds the alert will be fired. Here Vuejs cannot detect the addition or deletion of property.In this situation vue introduced new properties called get,set and delete.These properties are added at runtime.
This property is added dynamically at runtime.It sets property on an object.Please see the below example for set property.
Vue.set(target,key,value)
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvreact>
<p>cntr:{{employee.id}}<p>
<p><button @click="employee.id++">Press me<button>
<div>
<script type=text/javascript>
var myemployee={"id":1,"name":Muruga,"age":20}
var vm = new Vue({
el:"#dvreact",
data:()
{
cntr:1,
employee:myemployee
},
methods:{
},
});
vm.employee.salary="80000";
vm.$watch('countr',function(nval,oval){
alert('cntr incremented' + oval + 'to' +nval);
}
);
setTimeout({
function(){
vm.cntr=20;
},2000
});
<script>
<body>
<html>
in the above example,variable myemployee is created at the start of the code.
var myemployee={"id":1,"name":Muruga,"age":20}
and then it is passed to the data object in vue instance like this,
var vm = new Vue({
el:"#dvreact",
data:()
{
cntr:1,
employee:myemployee
},
methods:{
},
});
Let us say we want to add one more property called salary to the existing employee object.
vm.employees.salary="80000";
if you add like the above , you will not see the reactive getter or setter at the console. As seen above, in employee object salary is added. The get/set methods, which basically adds reactivity is available for the id, name, and age, and not available for salary. Let us see , how we can add the property dynamically using set property:-
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvreact>
<p>cntr:{{employee.id}}<p>
<p><button @click="employee.id++">Press me<button>
<div>
<script type=text/javascript>
var myemployee={"id":1,"name":Muruga,"age":20}
var vm = new Vue({
el:"#dvreact",
data:
{
cntr:1,
employee:myemployee
},
methods:{
},
});
vue.set(myemployee,'salary',80000)
vm.$watch('countr',function(nval,oval){
alert('cntr incremented' + oval + 'to' +nval);
}
);
setTimeout({
function(){
vm.cntr=20;
},2000
});
<script>
<body>
<html>
Now you can see the reactivegetter and setter in the console window of the browser.
Similarly we can delete the property dynamically.Let us see the following code for delete.
<html>
<head>
<title>
<script type=text/javascript src=js/vue.js><script>
<head>
<body>
<div id=dvreact>
<p>cntr:{{employee.id}}<p>
<p><button @click="employee.id++">Press me<button>
<div>
<script type=text/javascript>
var myemployee={"id":1,"name":Muruga,"age":20}
var vm = new Vue({
el:"#dvreact",
data:
{
cntr:1,
employee:myemployee
},
methods:{
},
});
vue.delete(myemployee,'salary')
console.log(vm);
vm.$watch('countr',function(nval,oval){
alert('cntr incremented' + oval + 'to' +nval);
}
);
setTimeout({
function(){
vm.cntr=20;
},2000
});
<script>
<body>
<html>
After deletion you can only see id , name and age in the output and also you can notice that get/set methods of reactive interface also got deleted.