Vue基础——Vue实例、计算属性和侦听器

Vue实例

vue的每一个组件都是一个实例，该实例对应很多属性和方法。
所接受的数据类型：number/string/boolean/array/json/undefined/null

	<div id="root">
		<div @click="fn">
			{{message}}
		</div>
	</div>
 
	<script>
		var vm = new Vue({
			el: '#root',
			data: {
			    message: 'hello world'
			},
			methods: {
                fn: function () {
					alert("hello")
                }
			}
		})
	</script>

数据绑定

插值表达式

{{数据名}} mustache语法 声明式渲染

指令

v-text=“数据名”`

v-html="数据" 非转义输出

属性
v-bind:html属性="数据" 属性值动态化
:html属性="数据" 简写
v-bind:[属性名]="数据" 属性名动态化

Vue实例的生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

生命周期钩子的 this 上下文指向调用它的 Vue 实例。

查看官网介绍

不要在选项属性或回调上使用箭头函数，比如created: () => console.log(this.a)或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function之类的错误。

计算属性

官网教程
是一个函数,所依赖的元数据变化时，会再次执行，平时会缓存，是响应式的，需要在模板中渲染才可调用

语法

//定义
computed:{
  计算属性: function(){return 返回值}		
}
//使用
使用:	{{计算属性}} |  v-指令="计算属性"

computed    VS    method

method	computed
方法会每次调用	基于它们的响应式依赖进行缓存的
一般	性能高
{{methodname()}}	{{computedname}}
适合强制执行和渲染	适合做筛选

属性检测

官网教程
需要在数据变化时执行异步或开销较大的操作时，而计算属性是同步的，这个时候需要属性检测watch

定义一个选项

watch:{
  数据名:'method函数名'    //数据名==data的key
  数据名:函数体(new,old){}
  数据名:{
    handler:fn(new,old){},
    deep: true //深度检测
    immediate: true //首次运行
  }
}

计算属性 VS 函数 VS 属性检测

	计算属性	函数	属性检测
依赖模板调用	√	-	×
是否缓存	√	×	√
异步	×	√	√

模板表达式

在dom里面插入数据，数据周围可以出现表达式，但不是语句，如{{数据+表达式}} v-指令="数据+表达式"

表达式：

1. title + 'abc'
2. `${title}123` 
3. bl ? 'true' : 'false'
4. 'i love you'.split(' ').reverse().join(' ')