vue的实例
vue的实例
创建一个vue实例的写法和创建一个变量一样
var vm = new Vue{{ //我们一般用vm来接收vue的实例，vm是 ViewModel的缩写
}}
然后，我们就可以给vue实例添加属性和方法了
var vm = new Vue{{
data: { //属性的声明，不同的属性用逗号隔开
test1: 123, //属性值可以是数字，字符串，对象，数组等
test2: \'abc\',
test3: {
test1: [3,4,5]
test2: [{},{},{}]
}
}
methods: { //方法的声明，不同的方法用逗号隔开
func1: function () { //这是vue的标准写法
//to do sth..
},
func2 () { //这是ES6的写法
//to do sth...
}
}
}}
这里有一个非常重要的地方：
当一个 Vue 实例被创建时，它向 Vue 的"响应式系统"中加入了其 "data" 对象中能找到的所有的属性(已经存在的属性)。
当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
也就是说，能够触发响应式更新的数据，一开始必须是data属性中已经存在的属性，
如果后来给data对象中新增了一些属性，那么这些新增的属性，是不会触发响应式渲染的。
(需要注意的是：这个新增的属性只是不会触发响应式渲染，但是属性值的确是有了，
后续赋值使用也会是最新的数据，只是前台页面显示不会更新)
***********
(
让我很疑惑的是：虽然语法规则说新添加的属性是不触发响应式的更新的。
但是很多时候我测试的时候，的的确确会触发响应式更新，
但这个码代我也没动，过几天再测试的话，
竟然有不触发响应式更新了，
所以，我很纳闷，为什么会发生这种清空，缓存吗？
)
***********
经测试，data下面没有某个属性时（直接关系），使用这个属性(无论是v-if="test",v-show="test"还是{{test}})
都会报error: test not defined
但是如果使用某个属性下没有的属性时（间接关系），使用v-if="test.abc" {{test.abc}} 哪怕test没有abc这个属性，也不会出问题
(这个需要深入了解机制和原理，找到原因)
-----
Object.freeze()
vue官方说使用Object.freeze()方法可以阻止修改现有属性的特性和值，并阻止添加新属性。
但是，我在测试demo中，并没有生效
(以后找到原因后回来解释一下)
-----
$
vue中的 $ 符号
vue官方提供了很多实用性的属性和方法
这些属性和方法都是以$使用的
比如：
this.$data //代表本实例的data属性
this.$set() //官方封装的set方法，用来使新增属性成为响应式触发
总之，这些以 $ 开头的方法或属性，都是vue官方封装好的很实用的方法或属性
以上是 vue的实例 的全部内容， 来源链接： utcz.com/z/376909.html
