vue各种属性的意义详细分析 _vue开发实战

【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 } }