vue3.0，setup()的使用，Composition Api(组合式api)data，computed，methods，watch

vue3.0项目创建好之后，来看看一个简单组件内的代码顺便介绍几个特点:

1.组合式api就是指把vue2.0中的 data，computed，methods，watch都集中在3.0中的setup()中
2.setup取代beforeCreate，created这两个周期，也就是原本放在这两个钩子的内容现在放在setup中
3.在setup里无法再使用this，因为在执行setup的时候组件实例还没创建成功(setup执行在beforeCreate之前)。
4.接收两个参数props，context(具体的后面讲)
5.代码可读性更高，维护也更方便。当然也完美兼容vue2.x

<template>
  <div class="home">
	{{user.name}}--{{user.age}}--{{num}}--{{doubleCount}}
	<button @click="change"></button>
  </div>
</template>

<script>
import { ref, reactive, computed, watch} from 'vue'
export default {
  name: 'Home',
  setup () {
  	const user = reactive({ name: 'jerry', age: 18}) // 创建引用类型数据使用reactive
  	const num = ref(6)	// 创建基础数据类型使用ref,使用是用.vulue
	const doubleCount = computed(() => {
      	return num.value * 2
    })
    // watch的单个值写法，第一个参数是一个getter函数，该函数返回一个响应式对象，要响应式。
    watch(() => num.value, (newValue, old) => {
    	// newValue新值,old旧值
    	console.log(newValue, old, '--w')
    })
    // watch的多个值写法
    /* const num1 = ref(11)
    watch([count, count1], ([newCount, newCount2], [oldCount, oldCount2]) => {
      console.log([newCount, newCount2], '--', [oldCount, oldCount2], '--w')
    })
     watch(() => user, (newValue, oldValue) => {
    	console.log(newValue, oldValue)
  	}, { deep: true }) // 深入监听user对象内部变化
    watch([count, count1], (newValue, oldValue) => {
     	console.log(newValue)// [newCount, newCount2]
      	console.log(oldValue)// [oldCount, oldCount2]
    }) */
    const change = () => {
      	num.value++
    }
    return {
    	user, 
    	num,
    	doubleCount，
    	change
    }
  },
  created () {
  	// vue2.0的内容也还是可以照常用的
  }
}
</script>

setup()的两个参数

<script>
import { toRefs, toRef } from 'vue'
export default {
  name: 'Home',
  // 因为props是响应性的，使用解构后会消除其响应性，所以需要使用toRefs, toRef
  // 但是context不具有响应性，可以直接使用解构赋值，但是只能访问attrs, slots, emit, expose
  setup (props, context) {
    const { name } = toRefs(props)
    const { name0 } = toRef(props, 'jerry') // toRef的第二个参数就类似于函数形参的默认值
   	const {attrs, slots, emit, expose} = context // 可以打印出来自己去看这几个属性
   	return {
    }
  }
}
</script>

方便维护，便于理解
这样看就不会像vue2.0那样，在维护的时候想要查询某个变量的逻辑，要去data，watch，methos等等里面去找，代码一多，眼睛都给你看画，脑壳看痛

<script>
import { ref, reactive } from 'vue'
export default {
  name: 'Home',
  setup (props, context) {
	const num = ref(0)
	/*
	.
	.这里都是对num的操作代码
	.
	*/
	
	const user = reactive({name: 'jerry'})
	/*
	.
	.这里都是对user的操作代码
	.
	*/
   	return {
    }
  }
}
</script>