<p id="inpChange"> vue实例创建后,弹出窗口: newV.message==data.message
</p>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建数据对象
var data={
message:"good good study"}
//创建一个新实例newV ,并把上面的数据对象data添加到这个newV实例中
//添加created这个声明周期钩子函数(created 钩子可以在实例被创建后执行代码)
var newV=new Vue({
el:"#inpChange",
data:data,
created:function(){
alert(this.message)
alert(this.message==data.message),
alert(this.message="day day up"), //修改实例中this.message 的值
alert(this.message==data.message) //此时结果为true,说明data 这个数据对象的message 值也随之修改了(双向响应)
},
});
例子说明:
//创建数据对象
var data={
message:"good good study"}
//创建一个新实例newV ,并把上面的数据对象data添加到这个newV实例中
//添加created生命周期钩子函数 (created 钩子可以在实例被创建后执行代码)
var newV=new Vue({
el:"#inpChange",
data:data,
created:function(){
alert(this.message==data.message)} , //返回结果ture, 说明message这个属性值已被添加到newV 这个实例中
alert(this.message="day day up"), //修改实例中this.message 的值
alert(this.message==data.message) //此时结果为true,说明data 这个数据对象的message 值也随之修改了(双向响应)
},
});
//注意:
只有当实例被创建时中存在的属性才是响应式的。
也就是说如果你添加一个新的属性,比如:
newV.b ="newMes"
对b属性值的修改不会触发其他改变(不响应)
可以预先设置一个带有初始值的数据对象,以后只要修改属性值就可以实现响应
如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
Object.freeze( )
会阻止修改现有的属性,也意味着响应系统无法再追踪变化。(阻止响应)
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="foo = 'after'">点击更改文字内容</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var obj = {
foo: 'before'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
例子说明:
vue 部分
1. 创建数据对象obj, 赋值 foo:"before",
var obj = {
foo: 'before'
}
Object.freeze(obj) // 对object 对象使用 Object.freeze( ) 方法
new Vue({
el: '#app',
data: obj
})
Html 部分
2. 绑定click点击事件foo="after" 在 button 元素上,为了点击按钮后,改变 foo 的值
<div id="app">
<p>{{ foo }}</p>
<button v-on:click="foo = 'after'">点击更改文字内容</button>
</div>
3. 点击按钮后,obj.foo 的值没有改变,说明后续的点击事件没有改变foo 的值,响应被阻止了