计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

声明在 computed 配置项中，一个计算属性对应一个函数
使用起来和普通属性一样使用 {{ 计算属性名 }} 计算属性 → 可以将一段求值的代码进行封装

注意：

computed配置项和data配置项是同级的
computed中的计算属性虽然是函数的写法，但他依然是个属性
computed中的计算属性不能和data中的属性同名
使用computed中的计算属性和使用data中的属性是一样的用法
computed中计算属性内部的this依然指向的是Vue实例

<div id="app">
	<h3>消费记录</h3>
	<table>
		<tr>
			<th>用途</th>
			<th>花销</th>
		</tr>
		<tr v-for="(item, index) in list" :key="item.id">
			<td>{{ item.name }}</td>
			<td>￥{{ item.num }}</td>
		</tr>
	</table>
	<p>总共花销：￥ {{ totalCount }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			list: [
				{id: 1, name: 'iPhone15Pro', num: 8999},
				{id: 2, name: 'iPad Pro', num: 7999},
				{id: 3, name: 'AirPods', num: 1999},
				{id: 4, name: 'Apple Watch', num: 2999}
			]
		},
		computed: {
			totalCount () {
				let count = this.list.reduce((sum, item) => sum + item.num, 0)
				return count
			}
		}
	})
</script>

依赖的数据变化，也会自动计算新的结果。

计算属性 VS 方法

computed计算属性：

作用：封装了一段对于数据的处理，求得一个结果

语法：

写在computed配置项中
作为属性，直接使用
- js中使用计算属性： this.计算属性
- 模板中使用计算属性：{{计算属性}}

methods计算属性：

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

写在methods配置项中
作为方法调用
- js中调用：this.方法名()
- 模板中调用 {{方法名()}} 或者 @事件名="方法名"

计算属性的优势：

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化了，会自动重新计算 → 并再次缓存

computed有缓存特性，methods没有缓存
当一个结果依赖其他多个值时，推荐使用计算属性
当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

完整写法

计算属性默认的简写，只能读取访问，不能 “修改”
如果要 “修改” → 需要写计算属性的完整写法

<!-- 当我们需要修改计算属性的值时，是没办法改动的，这时候需要写完整写法 -->
totalCount: {
	get() {
		let count = this.list.reduce((sum, item) => sum + item.num, 0)
		return count
	},
	set(value) {
		console.log(value);
	}
}

watch侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作。

语法：

简单写法：简单类型数据，直接监视
完整写法：添加额外配置项

deep: true 对复杂类型深度监视
immediate: true 初始化立刻执行一次handler方法

<!-- 1. 简单写法：简单类型数据，直接监视 -->
<div id="app">
	<h2>加法计算器</h2>
	<input type="number" v-model.trim.number="num1">
	+
	<input type="number" v-model.trim.number="num2">
	= {{ sum }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			num1: 0,
			num2: 0,
			sum: 0
		},
		watch: {
			num1 (newValue, oldValue){
				this.sum = newValue + this.num2
			},
			num2 (newValue) {
				this.sum = newValue + this.num1
			}
		}
	})
</script>

<!-- 2. 完整写法：添加额外配置项 -->
<div id="app">
	<h2>加法计算器</h2>
	<input type="number" v-model.trim.number="num.num1">
	+
	<input type="number" v-model.trim.number="num.num2">
	= {{ num.sum }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
	const app = new Vue({
		el: '#app',
		data: {
			num: {
				num1: 0,
				num2: 0,
				sum: 0
			}
		},
		watch: {
			num: {
				deep: true, // 对复杂类型深度监视
				immediate: true, // 初始化立刻执行一次handler方法
				handler () {
					this.num.sum = this.num.num1 + this.num.num2
				}
			}
		}
	})
</script>

生命周期

Vue生命周期：就是一个Vue实例从创建到销毁的整个过程。

生命周期四个阶段：创建、挂载、更新、销毁

创建阶段：创建响应式数据
挂载阶段：渲染模板
更新阶段：修改数据，更新视图
销毁阶段：销毁Vue实例

Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行自己的代码。

created()：响应式数据准备好了，开始初始化渲染请求

mounted()：模板渲染完成，开始操作DOM

const app = new Vue({
	el: '#app',
	data: {
	},
	watch: {
	},
	created() {
		console.log('响应式数据准备好了'); // 可以放置网络请求渲染数据的方法
	},
	mounted() {
		console.log('模板渲染完成'); // 可以放置文本框聚焦的方法
		// document.querySelector('#inp').focus() // 文本框聚焦
	}
})

工程化开发入门

开发Vue的两种方式：

核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue。
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。

脚手架Vue CLI

介绍：

Vue CLI 是Vue官方提供的一个全局命令工具

可以帮助我们快速创建一个开发Vue项目的标准化基础架子。集成了webpack配置

好处：

开箱即用，零配置
内置babel等工具
标准化的webpack配置

使用步骤：

全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
查看vue/cli版本： vue --version
创建项目架子：vue create project-name(项目名不能使用中文)
启动项目：yarn serve 或者 npm run serve(命令不固定，找package.json)

默认初始化界面：

运行流程：

main.js核心代码：

import Vue from 'vue' // 导入Vue
import App from './App.vue' // 导入 App.vue
  
Vue.config.productionTip = false
  
new Vue({ // 实例化 Vue， 将 App.vue 渲染到index.html容器当中
  render: h => h(App),
}).$mount('#app')