Vue实例 实例方法与属性
vue实例 选项对象 实例属性与方法
1 创建vue实例:
vue实例的创建:一般通过new关键字的方式来创建,构造函数的参数列表需要传入一个选项对象
var vm = new Vue(paramObj);
1.1 vue实例的选项对象
创建一个vue实例时,需要传入一个选项对象,这个对象里面有如下几个常见的属性
el
- 是根实例的特有属性,代表根元素
- 提供一个页面上的DOM对象作为Vue实例的挂载目标.可以是选择器或者或DOM元素实例
- 可以通过vm.$el访问
- 当el和template共同存在时,el会被template覆盖
<div id="app">{{text}}</div>
<script>
var vm = new Vue({
el:"#app",
template:`<span>template text</span>`,
data:{
text:"text"
}
});
</script>
template
- 一个字符串模板,可以是选择器或包含html内容的字符串,也可以是
<script type="text/template">
的包含内容 - DOM中模板标签之间的内容可以用插槽引入
data
- data对象中的属性是响应式的,直接向vm实例设置属性不是响应式的
- data的响应性可以被Object.freeze()打断
- data属性的使用:
- Vue实例的函数中:使用this.prop调用(methods,computed的this自动绑定为vue实例)
- 标签内:通过表达式{{porp}}访问
- 标签上:通过绑定调用:[prop]="prop"
<div id="app" :[prop]="prop">{{prop}}</div>
<script>
var vm = new Vue({
el:"#app",
data:{
prop:"mytext"
}
});
</script>
computed
为什么要有computed属性而不直接在模板表达式里计算?
为了将复杂逻辑从模板计算中解脱出来,模板设计的初衷是简单计算和数据显示,在模板中进行过于繁琐的计算会降低代码的可维护性。
- computed主要用于根据已有属性生成新的属性.当然不根据已有属性生成也是可行的,不过一般不建议这么做,不符合语义,像这种情况放入data是更好的选择
- computed是基于响应式依赖进行缓存的。也就是说,如果一个计算属性的依赖属性没有发生变化,那么重复访问此属性,不会另外进行编译和计算,而是会直接从缓存里读取该属性。但也因为缓存,使得重复读取计算属性中的new Date()时,不会更新
- computed中this指向VM实例,因此可以通过this访问data中的属性
- computed默认只含有get方法,当然我们也可以自己写入set方法
<div id="app" :[prop]="personMsg">{{personMsg}}</div>
<script>
var vm = new Vue({
el: "#app",
prop:"text",
person:{
name:"bugger",
age:1024
}
},
computed: {
//基于prop属生成属性
sliceText() {
//依赖属性prop不变化,这里只会打印一次
//会从缓存中直接读取而不是编译执行函数代码再返回一次
console.log("slice...");
return this.prop.slice(0, 1);
},
personMsg:{
get(){
return this.person.name+":"+this.person.age;
},
set(cur){
console.log("setter:",cur);
this.person.name = cur.name;
this.person.age = cur.age;
}
}
},
created() {
setInterval(() => {
console.log(this.sliceText);
}, 1000);
}
});
</script>
methods
- 与computed一样,methods中的 this 自动绑定为 Vue 实例
- 与computed不同的是,methods不存在缓存,每次调用都编译执行函数代码,methods不能像computed那样使用get set
- 在表达式中可以通过调用方法,可以达到和调用computed中属性一样的显示效果
- 一般用于设置事件回调函数
<div id="app" :[prop]="sliceText()">{{sliceText()}}</div>
<script>
var vm = new Vue({
el: "#app",
data: {
prop: "text",
},
methods: {
sliceText() {
//只要一执行就调用
console.log("slice...");
return this.prop.slice(0, 1);
},
},
created() {
setInterval(() => {
this.sliceText();
}, 1000);
}
});
</script>
watch
- 主要用于监听vue实例已有属性的变化,对于不存在的属性无法起到监听作用
- watch可以在参数列表拿到变化的前一个对象和变化之后的新对象
- watch可以检测对象深层次属性的变化以及设置回调函数是否立即触发
<div id="app">
<div>
{{fullname}}-{{fullname}}
</div>
<hr>
<div>
{{getFullName()}}-{{getFullName()}}
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "aaa",
lastname: "bbb",
person: {
pName: "fighter",
age: 22
}
},
computed: {
//计算属性会有缓存,这里只打印一次
fullname() {
console.log("computed...");
return this.firstname + this.lastname;
},
fullname: {
get() {
return this.firstname + this.lastname;
},
set(name) {
console.log("computed...");
this.lastname = name;
}
}
},
methods: {
//每次调用都会执行,这里打印两次
getFullName() {
console.log("method....");
return this.firstname + this.lastname;
}
},
mounted() {
//只要这里面的值修改,computed里面的值也会跟着修改
setTimeout(() => this.lastname = "ccc", 3000)
},
//监听data数据的变化
watch: {
//监听属性
lastname(prev, cur) {
console.log(prev, cur);
},
//监听对象,监听对象内部值,设置deep为true
person: {
handler() {
console.log("person change...");
},
//对象内部值的变化,数组的变化不需要这么做
deep: true,
//设置为true之后回调函数会立即触发
immediate: true
}
}
})
</script>
props
1.2 vue实例的属性对象
Vue实例对外提供了一些有用的实例属性与方法,用前缀$+属性名/方法名表示,以便于和用户定义属性区分开
属性:
vm.$el
:根实例的挂载DOM结点vm.$parent
:当前实例的父实例vm.$children
:当前实例的子实例vm.$root
:组件树的根实例,如果没有父实例,vm.$root指向自己vm.$refs
:注册过 ref 特性 的所有 DOM 元素和组件实例vm.$data
:指向实例的data属性vm.$props
:指向当前组件的props对象属性vm.$watch
:指向实例的watch方法vm.$set
:这个方法给实例设置的属性是响应式的.直接设置vm.prop不是响应式的vm.$mount
:这个方法等同于el属性,都是给vue实例挂载DOM结点,底层实现一样vm.$nextTick
:DOM完成更新后,自动执行,调用nextTick中的回调函数
1.3 vue实例的方法 生命周期 钩子函数
参考我的另一篇博客Vue生命周期