vue使用
计算属性和监听
计算属性(computed)
缓存特性和使用场景
依赖的数据变化时候此字段的数据跟着变化，所以这里就存在缓存的情况，如果依赖的数据没有变化，这时候这个数据本身也不变。
可以加setter
class和style属性
vue为这两属性做了增强，本来v-bind绑定的只能是字符串，这里支持对象和数组。
class
可以与普通的class共存，可以同时写(自己之前的写法都是一次只用一个，以为不能混用。。。)
对象可以写在属性里，也可以写在data中、computed中。
数组形式的话直接写字段名，最终渲染出来是字段对应的值。
###style
支持驼峰命名和短横线命名。
1 | <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> |
1 | data: { |
当使用:style的时候，vue会自动添加浏览器需要的前缀。
可以给一个css属性绑定多个值，放在一个数组中，这样就只会渲染浏览器支持的最后一个值。
vue.filter
过滤器，用于处理一些转义等字段。
使用
全局
1 | Vue.filter('test',function(value){return value + 'test'}); |
局部
在组件内部添加filter属性
class
对象写法
数组写法
访问数据及方法
只有写在template里边默认是在当前组件内取值，不用加this
子组件中的data不跟随props变化而变化
data中的值只会在组件第一次初始化数据时候执行一次，并不会跟随props的变化而变化。
想要响应式变化就需要用到computed和watch。
事件监听使用（模板非字符串模板）
不同于组件和props，事件名不会被用作一个js变量名或属性名，所以没有理由使用camelCase或pascalCase命名。事件监听器在DOM模板中都会转为小写的，因为html不区分大小写。推荐使用kebab-case命名方式。
props中有对象子组件可以直接修改对象内的值
装修助手量房端详情页采用这种方式进行修改
vue生命周期
执行过程
1 | 每种生命周期由父组件向子组件执行，接着在执行下一个生命周期，比如会先执行所有的created函数之后再执行mounted函数。 |
注意事项
生命周期函数不支持async
因为整个 diff 和 render 的算法都是基于组件生命周期同步执行的前提下的。而且任意一个组件的生命周期可能异步推迟最后的渲染完成是绝对不应该出现的设计。
github问题地址
css作用域问题
vue-cli命令提供了两种内置的解决css样式覆盖问题的方案，scoped和css modules。
scoped
使用
简单易用，在style标签内写上scoped属性即可。
原理
为class名称后边添加data-xxxx这样一串字符串用来确保css样式的唯一。
缺点
1. 若父组件和子组件有同名class，那么父组件设置的样式还会作用于子组件。
2. 对v-html中的元素设置的样式是不生效的。
css modules
需要使用vue-cli3生成项目脚手架才能直接用，否则需要自己配置webpack。
配置webpack很简单，就是在css-loader后边加个?modules打开css modules。
loader: 'css-loader?modules',
使用
style标签中添加module属性，但是在class中需要通过$style.xxx来设置样式
<div :class="$style.test"></div>
原理
将每个css名称编译成为唯一的字符串
缺点
使用复杂，所有样式都要通过$style操作
优点
- 名称唯一
- 可以显示的使用$style去操作css，甚至是在钩子函数中进行操作。