初始setup

setup

setup作为vue3里面的一个配置项，可以在里面写方法，变量，声明周期，计算属性等等

export default {
  name: 'setup',
  // setup作为vue3里面的一个配置项，可以在里面写方法，变量，声明周期，计算属性等等
  setup() {
    // 里面的写法同原生js
    let name = 'fufu'
    let age = 20
	function getName() {
		console.log(name)	
	}
	//该方法必须有一个返回值，一般来说返回一个对象,里面的值可以直接在页面进行展示。
	return {name, age, getName}
  }
}

但是setup函数并不是只能返回一个对象，还可以返回一个渲染函数

// 在使用setup方法的时候，若想使用返回渲染函数的方法，则必须从vue里面引入h函数
import {h} from 'vue'
export default {
  name: 'setup',
  setup() {
    return () => {
       return h('h1', 'fufu')
    }
  }
}

在vue3里是可以setup配置项和vue2的data等配置项混用的（但是强烈不推荐）

export default {
  name: 'setup',
  //在vue3里面data必须为一个函数
  data() {
  	height: 170
  }
  setup() {
    // 里面的写法同原生js
    let name = 'fufu'
    let age = 20
	function getName() {
		console.log(name)	
	}
	//该方法必须有一个返回值，一般来说返回一个对象,里面的值可以直接在页面进行展示。
	return {name, age, getName}
  }
}

在混用的情况下，setup里面不可以使用vue2配置项里面的数据，但是vue2配置项里面的可以使用setup里面的数据，并且同名的情况下，setup优先级更高。（因为setup执行机制很早，那个时候连this都没有）

** 不能对setup函数使用async，因为一旦使用async后，返回的就不是一个单纯对象，而是一个包装过的promise对象了，需要使用then才能拿到需要的对象。**

上面的代码虽然可以在页面进行展示，但是其实数据并非响应式的。想要将数据进行响应式处理，必须引用ref方法，ref方法会将数据转换为一个refImpl类的实例，赋予get，set方法进行响应处理。

setup() {
    // 在里面定义变量同原生js
    let name = 'fufu'  //非响应
    let age = ref(20)//响应
    onMounted(() => {
      console.log(name, age);
      // name: fufu
      // age:RefImpl{_shallow: false, dep: Set(1), __v_isRef: true, _rawValue: 20, _value: 20}
    })
    return {name, age}
  }

**注意：**setup方法执行时机在createBefor之前，只执行一次，并且里面没有this。