vue3.0初体验

安装
- 和vue2.X类似使用vue-cli进行脚手架安装，当然我们一会讲一下vite工具安装
```
vue create hello 
```
- 如果没有上述界面说明需要升级你的vue-cli的版本
```
vue update -g @vue/cli
```
- 可以选择Vue 3 Preview，也可以选择Manually Select features 进行版本选择

浅度对比

首先入口对比main.js（左边vue3右边vue2.x）;使用了createApp（）

vue3 的 Template支持多个根标签，但是vue2.x只支持一个

// vue2
<template>
  <div>根元素 示例</div>
</template>

// vue3
<template>
  <div>根元素 示例 0</div>
  <h1>根元素 示例 1</h1>
  <h1>根元素 示例 2</h1>
</template>

vue3 使用组合式API
- 原来vue2.x的data 、computed、watch、mounted等等都要return 出来才能访问到，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解。（我们还是举个例子吧？我们有个一个审批的表，需要跑南边填一个选项，完了需要北边填一个选项，东边和西边也要，当你拿着这个表跑来跑去，你就会感觉很累，诶当有一天我们有个地方说这个属性可以集中把这些地方都跑了，就不用东西南北各处跑了。这不就清晰省事了啊，那现在vue3中这个地方就是setup）
- 新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，就作为组合式 API 的入口点。
- warning由于在执行 setup 时，组件实例尚未被创建，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法
- 使用ref 使任何响应式变量在任何地方起作用，如下所示
```
const { user } = toRefs(props)
const repositories = ref([])
const getUserRepositories = async () => {
  // 更新 `prop.user` 到 `user.value` 访问引用值
  repositories.value = await fetchUserRepositories(user.value)
}
```
- 注意ref、reactive、toRef、toRefs的区别

vue3中的组件上的v-model 用法已更改，替换v-bind.sync

// 在2.x中 
<ChildComponent v-model="pageTitle" />
<!--是以下的简写：-->
<ChildComponent :value ="pageTitle" @input ="pageTitle=$event" />
<!--如果要将属性或者事件名称改为其他，则需要在ChildComponent组件中添加model选项-->
// childCompnent.vue
<script>
	export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
      // 这将允许 `value` 属性用于其他用途
      value: String,
      // 使用 `title` 代替 `value` 作为 model 的 prop
      title: {
        type: String,
        default: 'Default title'
      }
    }
  }
  methods:{
    change(){
      this.$emit('cc','我被子组件改变了')
    }
  }
</script>
<!--所以，这个栗子中的v-model是以下的简写-->
<ChildComponent : @change="pageTitle = $event" />

//在3.x中 ，自定义组件上的v-model 相当于传递了modelValue prop并接收抛出的update：modelValue事件：
<ChildComponent v-model ="pageTitle" />
<!-- 是以下的简写 -->
<ChildComponent :modelValue ="pageTitle" @update:modelValue="pageTitle=$event" /> 
<!-- 若需要改变model名称，而不是改变组件内的model选项，那么现在我们可以将一个argument 传给model-->
<ChildComponent v-model:title ="pageTitle"/>
<!-- 是以下的简写 -->
<ChildComponent : @update: />

新增context.emit，与this.$emit作用相同（vue3中只能在methods中使用了，因为vue3的this与vue2的this不同了）

import {SetupContext } from 'vue'
setup(props: Prop, context: SetupContext) {
    const toggle = () => {
      context.emit('input', !props.value)
    }
    return {toggle}
}

computed 计算属性与之前2.x 差不多，只是使用前要先引用

setup(props: Prop, context: SetupContext) {
  const count = ref(0);
 	const changCount = computed(()=>{
    return count.value ++
  }) 
  return {
    count
  }
}

watchEffect监听

通过ref或者reactive去创建多个响应式的值，当任何一个值发生改变的时候，立即触发这个函数。

setup(props: Prop, context: SetupContext) {
  const count = ref(0);
  watchEffect(()=>{
    console.log(count)
  })
  return {
    count
  }
}

如果有不正确的理解等彻底理解透之后，随时进行更新

深度对比
- 在 vue 中， Object.defineProperty 无法监控到数据的下标变化，导致直接通过数组下标给数组设置新值时，无法做到实时响应。目前 vue 只针对数组的变异方法 push/pop/shift/unshift/splice/sort/reverse 做了 hack 处理，存在响应局限。Proxy 是 ES6 中新增的一个特性，翻译过来意思是"代理"，用在这里表示由它来“代理”某些操作。 Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。
  
  Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
- 其他下一篇进行补充