Vue常见选项和属性

Vue选项

1. 数据选项

Vue在声明组件时，如果使用了对象类型的data选项，模板将找不到data中被声明的数据。如果使用了支持Vue模板的语法检器，将得到错误的提示“data property in component must be a function”。

2. 属性选项

Vue为组件开发提供了属性（props）选项，我们可以使用它为组件注册动态属性，来处理业务之间的差异性，
使代码可以复用相似的应用场景。

props选项可以是数组或者对象类型，用于接收从父组件传递过来的参数，并允许为其赋默认值、类型检查和跪着校验等。

示例代码如下：

3. 方法选项

代码示例如下：

使用箭头函数定义方法时并不会创建函数作用域，因此this也不会指向其父级实例，此时的this会向上追踪。当找到某个函数作用域时
this将指向该函数的父级实例，否则this将指向浏览器的内置对象Windows。

4. 计算属性

计算属性（computed选项）目的在于减轻模板上的业务负担，当数据链上出现衍生数据时，我们可以利用它去维护使用。

示例代码如下：

    
    



    
英语中的“互文”
    
案例:
    
{{message}}.  我看到的是车还是猫。
    
{{noSpaceMsg}}
    
{{palindromeMsg}}
    
英语中也有“互文”的修辞手法，比如{{message}}这句话，
    
将句中空格去掉可得 {{noSpaceMsg}},
    
将句中空格去掉并将其倒序可得 {{palindromeMsg}}。
    
可看到，{{noSpaceMsg}} == {{palindromeMsg}}
。

使用了computed之后，组件的代码结构明显清晰了许多，而且即使日后数据的数据处理方式发生了变化，也只需要在选项中修改即可，
与methods一样，computed不能以箭头函数声明，同时它也会被混入Vue实例，并可通过this调用。

由于计算属性依赖于响应式属性，所以当且仅当响应式属性变化时，计算属性才会被重新计算，因此相比于使用methods函数求值，这种求值的效率更高。

5. 侦听属性

Vue可以使用侦听属性（watch属性）为实例添加被观察对象，并在对象被修改时调用开发者自定义的方法。

    
    



    
数据变化之前
        
            * 指令v-once可以限制视图不在响应数据变化
        
    
    
{{message}}
    
{{noSpaceMsg}}
    
数据变化之后
    
{{message}}
    
{{noSpaceMsg}}