vue3.0初体验-一一网

好久不见，甚是想念；一日不见，如隔三秋；一天不打上房揭瓦；我觉得我就属于最后一句话吧。虽说二月很短但是也不是一直不学习的理由，虽然二月有个新年，也并不是我不学习的理由；每次来总是这样哈哈哈哈，但是闲下来是真的需要学习啊，我还是需要挣money ，毕竟还要面朝大海春暖花开；毕竟还要劈柴喂马周游世界；还有粮食和蔬菜；还有未来媳妇的包包哈哈哈哈未来孩子的奥利奥。尤大已经发布vue3.0 有一阵子了，各大UI库也正完成适配，可以说vue3势在必行，所以还是跟紧我们的潮流，毕竟这是一个前端人员应有的敏锐感。

安装
- 和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 :title="pageTitle" @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 :title="pageTitle" @update:title="pageTitle = $event" />
复制代码

新增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 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
- 其他下一篇进行补充