vue各种属性的意义详细分析

对于初学者来说，面对vue中的各种属性确实有点犯懵，搞不清楚函数什么情况下写到哪个属性底下比较合适。今天就来罗列以下vue中最常用到的属性及其作用。

比如：

new Vue({
el: "#vm", //为实例提供挂载元素，该元素下被vue控制
data: {
        fullName: 'foo mui',//初始化实例属性
        lastname:"mui",
        firstName:'foo'
},
props: ["title"], //父组件向子组件传值
methods: {
go:function(){
//该属性中申明方法
        },
        // 或者
        // go(){
        },  
        created: function(){
// 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
},
    
mounted: function(){
// 钩子函数,在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
},
computed: {
//计算属性，当数据发生变化时才调用，否则直接调用缓存。好处是提升性能
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
Filters:{
 // 自定义过滤器
}
watch: {
//监测变化。
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});

一、el属性

这是我们最常见的属性，用来为vue实例提供挂载元素。其中值为挂载元素的id。

例如：

el: '#vm',

二、data属性

data属性是一个对象，对象属性是需要绑定的数据。若在组件中data属性返回的是一个函数，那需要绑定的数据放在函数里面。为什么会用一个函数来返回对象属性呢，因为组件一般都会被重复利用，组件被多处使用时，绑定的数据会发生变化，如果都写在data对象中，就不好维护甚至发生冲突，所以使用函数返回对象的方式。

例如：

var vm = new Vue({
el: '#vm',
data: { // 返回对象
title: "",
brandName: " ",
}
})


Vue.component("my-component",{
template: `<img />`
data: function(){ // 返回函数
return {
'a': 1
}
}
})

三、props属性

props属性是接受父组件传过来的值，如果值多，可以写成数组的形式。也可以写成一个对象，用传过来的值做校验等。

props: ["content","index"]
           
                props: {
                 content: {
                 type: String, // 父组件传过来的值的类型。
                 default: xiao, 
                 required: true
                 }
                }

四、methods属性

methods对应一个对象，对象中存放的是函数方法，所以一般的函数定义都放在methods里面。

例如：

methods: {
go: function (val) {  // 函数}

五、mounted属性与created属性

这两个属性，也是存放函数的，不同的是created在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

上理解图：

六、computed属性与watch属性

这两个都是监听vue属性，computed属性当数据发生变化时调用里面的函数，如果数据没发生变化就调用缓存数据，大大提高了性能，但是computed属性中需要一个返回值，而且代码是同步执行；而watch属性不需要返回值，也可以是异步的。

例如：

computed: {
//计算属性，当数据发生变化时才调用，否则直接调用缓存。好处是提升性能
fullName: function () {
return this.firstName + ' ' + this.lastName
        }
        // 计算属性中这两个方法是固定的(get是默认的，可以自己加set)，在调用和设置对应的值的时候会调用对应的函数。
},
watch: {
//监测变化。
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}