04.vue3基础语法（三）（vue3的options-API）

一、复杂data的处理方式

在模板中可以通过插值语法显示一些data中的数据。
但在某些情况下，需要对数据进行一些转化后再显示，或者需要将多个数据结合起来显示。
模板中使用表达式可以用于简单的运算，模板过重会造成难以维护；而且如果有很多地方使用，会有大量重复的代码。

将逻辑抽离出去的方法：
（1）抽取到methods中 ，缺点:所有的data使用过程变成了方法调用。
（2）使用计算属性computed。

二、认识计算属性computed

（1）什么是计算属性
对于任何包含响应式数据的复杂逻辑，都应该使用计算属性。计算属性被混入到组件实例中，所有getter和setter的this上下文自动的绑定为组件实例。

（2）计算属性的用法
选项：computed
类型：{[key:string] : Function | {get:Function,set:Function }}
(3) 案例
案例一：两个变量拼接之后在页面中显示
案例二：分数大于60，界面显示及格，小于60，界面上显示不及格；
案例三：一个变量记录文字，某种情况下直接显示这段文字；某种情况下将文字进行反转。

//1、利用表达式实现
<h2>{
  {firstname + " "+lastname}} </h2>
<h2>{
  {score >= 60 ? '及格':'不及格'}}</h2>
<h2>{
  {message.split(" ").reverse().join(" ")}} </h2>

data() {
					return{
						firstname : "li",
						lastname : "phoebe",
						score :75 ,
						message : 'hello world'
					}
				}

//2、抽取到methods中
<template id="myapp">
			<h2>{
  {getName()}}</h2>
			<