vue3.0学习（1）

虽然工作中使用的都是vue2.0但是为了以后的工作还是看了一些vue3.0。

setup() 函数

setup() 函数是 vue3 中专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。
setup 函数会在 beforeCreate 之后、created 之前执行。

1.setup是一个新的组件选项，也是其他API的入口。也就是说，你所有的操作都将在setup函数内部定义和执行， Vue3.0也将用函数代替Vue2.x的类也就是new Vue()
2.setup 第一个参数是props,这里的props和Vue2.x中的props一致。
3.何时调用？setup是在一个组件实例被创建时，初始化了 props 之后调用，其实就是取代了Vue2.x的careted和beforeCreate。
4.setup返回一个对象，对象中的属性将直接暴露给模板渲染的上下文。而在Vue2.x中，你定义的属性都会被Vue内部无条件暴露给模板渲染上下文。

接收prop

 props: {
    p1: String,
  },
  setup(props, context) {
    console.log(props.p1);
  },

context

setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs  
  }
}

computed

计算值的行为跟计算属性 (computed property) 一样：只有当依赖变化的时候它才会被重新计算。类型某act的useCallback useMemo。
computed() 返回的是一个包装对象，它可以和普通的包装对象一样在 setup() 中被返回 ，也一样会在渲染上下文中被自动展开。

// 创建一个 ref 响应式数据
const count = ref(1)

// 创建一个 computed 计算属性
const plusOne = computed({
  // 取值函数
  get: () => count.value + 1,
  // 赋值函数
  set: val => {
    count.value = val - 1
  }
})

// 为计算属性赋值的操作，会触发 set 函数
plusOne.value = 9
// 触发 set 函数后，count 的值会被更新
console.log(count.value) // 输出 8

计算属性与数据监听

export default {
    setup() {
        const count = ref(0);
        const doubleCount = computed(() => {
            return count.value * 5;
        });
        watch(
            () => count.value,
            (val, oldVal) => {
                console.log(`count is ${val}`);
            },
            {
                //是否深度监听
                deep: true,
                //是否先执行一次
                immediate: true
            }
        );
        function add() {
            count.value++;
        }
        return {
            count,
            add,
            doubleCount
        };
    }
};

计算属性 computed 是一个方法，里面需要包含一个回调函数，当我们访问计算属性返回结果时，会自动获取回调函数的值。

监听器 watch 同样是一个方法，它包含 3个参数，前两个参数都是 function，第三个参数则是是否深度监听等。
第一个参数是监听的值，count.value 表示当 count.value 发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调。