vue3学习 2.组合API

1.vue2的老旧模式

数据放在data里面 但是操作数据的方法可能在methods或者computed或者watch里面 分开操作有点不合适

2.vue3中新增setup方法

setup函数时组合API的入口函数

<template>
    <div>
        <p>{{count}}</p>
        <button @click="myFn">按钮</button>
    </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: 'App',
  components: {
  },
  setup(){
      //定义了一个名称焦作count变量,这个变量的初始值是0
      //这个变量发生改变之后,vue会自动更新UI
      let count = ref(0)
      //在组合API中 如果想定义方法不用定义到methods里直接定义就能用(但是要暴露出去)
      function myFn(){
        //   alert(11)
        console.log(count.value)
        count.value++
      }
      //注意点:
      //组合API中定义的变量/方法,要想在外面使用 必须通过return {xxx,xxx}暴露出去
      return{count,myFn}
  },
}
</script>

3 vue2和vue3关于数据和方法的对比

4 setup()函数的执行时机和注意点

1,setup函数执行时机
	执行顺序
	setup:先执行 然后再是reforeCreate和created
	beforeCreate:表示组件刚刚被创建出来,组件的data和methods还没有初始化好
	created:主键刚刚被创建出来,并且组件的data和methods已经初始化好了
2,setup注意点
	执行setup的时候还没有执行created生命周期.
	这里因为data和methods还没有初始化好所以调用不到data和methods里面的数据和方法
	由于我们不能再setup函数中使用data和methods,
	所以vue为了避免我们错误的使用,他直接将setup函数中this修改成了undefined
	setup函数只能是同步的 不能是异步的 

5 reactive和reactive的注意点

1,什么是reactive?
	reactive是vue3中提供的实现响应式数据的方法
	在vue2中响应式数据是通过defineProperty来实现的
	而在vue3中响应式数据是通过ES6的Proxy来实现的
2.reactive注意点:
	reactive参数必须是对象(json/arr)  (如果穿进去的是个字符串 则对数据进行不了操作)
	如果给reactive传递了其他对象 (其他对象如  new Date())
	+默认情况下修改对象,界面不会自动更新
	+如果想更新,可以通过重新赋值的方式

6 什么是ref

1.什么是ref?
	-ref和reactive一样,也是用来实现响应式数据的方法.
	-由于reactive必须传递一个对象,所以导致在企业开发中
	 如果我们只想让某个变量实现响应式的时候会非常麻烦
	 所以vue3就给我们提供了ref方法,实现对简单值的监听
2.ref本质:
	-ref底层的本质其实还是reactive
	 系统会自动根据我们给ref传入的值将它转换成
	 ref(xx) -> reactive({value:xx})
3.ref注意点:
	-在vue中使用ref 的值不用通过value获取
	-在JS中使用ref的值必须通过value获取

7.ref和refactive的区别

1,ref和reactive的区别:
	如果在template里面使用的是ref类型的数据,那么vue就会自动帮我们添加.value属性
	如果在template里面使用的是reactive类型的数据,那么vue就不会自动帮我们添加.value属性
	vue通过自带的__v_isRef:true这个属性来判断是不是ref类型
2.vue是如何决定是否需要自动添加.value的?
	vue在解析数据之前,会自动判断这个数据是否是ref类型的
	如果是就自动添加.value.如果不是就不添加.value
3.vue是如何判断当前数据是否是ref类型的?
	通过当前数据的__v_isRef来判断
	如果有这个私有的属性,并且取值为true,那么就代表是一个ref类型的数据
4.我们自己可以通过isRef,isReactive来判断是不是ref属性数据(返回值为true或者false来判断是那种类型)

4