开启vue3.0学习之旅attrs 和 slots 都是内部组件实例上对应项的代理，可以确保在更新后仍然是最新值。所以可

setup(props, this(上下文对象))

该函数相当于一个生命周期函数，vue中过去的data，methods，watch等全部都用对应的新增api 写在setup()函数中执行时机在beforecreate与created之间。vue3也是取消了这两个钩子，统一用setup代替由于所有东西都得调用api写在setup中，这让我感觉有点像写react的感觉。数据return出去，像过去data(){ return {} }一样

该函数接收 props 作为其第一个参数：
props 对象是响应式的，watchEffect 或 watch 会观察和响应 props 的更新：
attrs 和 slots 都是内部组件实例上对应项的代理，可以确保在更新后仍然是最新值。所以可以解构，无需担心后面访问到过期的值：
this 在 setup() 中不可用

export default {
  props: {
    name: String,
  },
  setup(props, { attrs }) {
    console.log(props.name)
    watchEffect(() => {
      console.log(`name is: ` + props.name)
    })
    // 一个可能之后回调用的签名
    function onClick() {
      console.log(attrs.foo) // 一定是最新的引用，没有丢失响应性
    }
    
  },
}

reactive({})

该函数传入一个对象，里面的数据会变成响应式的数据。类似于react中的state，只不过state更新的时候不需要setState一遍了想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可

ref()

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。
注意当嵌套在 reactive Object 中时，ref 才会解套。从 Array 或者 Map 等原生集合类中访问 ref 时，不会自动解套：

toRefs()

computed()

计算属性
传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态。

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0

watch

监听属性
watch 和 watchEffect 在停止侦听, 清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)，副作用刷新时机和侦听器调试等方面行为一致.

watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

readonly

全新的生命周期函数（只能在setup中使用）

beforeCreate -> `use setup()`
created -> `use setup()`
beforeMount -> `onBeforeMount`
mounted -> `onMounted`
beforeUpdate -> `onBeforeUpdate`
updated -> `onUpdated`
beforeDestroy -> `onBeforeUnmount`
destroyed -> `onUnmounted`
errorCaptured -> `onErrorCaptured`

新增的钩子函数

onRenderTracked
onRenderTriggered

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}

provide & inject

可以取代props，类似react，在父子传信的时候不用再一级一级的props了，
只要父级provide了数据，无论嵌套多少层级的子组件，
都可以在对应的子组件中inject获取数据

Vue3.0和Vue2.0的区别

1、默认进行懒观察（lazy observation）。

在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

2、更精准的变更通知。

比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

3、3.0 新加入了 TypeScript 以及 PWA 的支持

4、部分命令发生了变化：

下载安装 npm install -g vue@cli

删除了vue list

创建项目 vue create

启动项目 npm run serve

5、默认项目目录结构也发生了变化：

移除了配置文件目录，config 和 build 文件夹

移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中

在 src 文件夹中新增了 views 文件夹，用于分类视图组件和公共组件

· 3.0比2.0 快2倍

· 3.0去掉了filter, 么有beforeCreate created,用setup取代

· reactivity是可以单独作为库使用的

· 单独功能可以抽离取代了mixin 优于mixin 解决上下反复横跳

· 支持多个子节点 fragment

· setup里没有this

· Proxy实现响应式不需要set delete 兼容性并不好

· 响应式方面性能得到很大提升不用初始化的时候就递归遍历属性

· 响应式不区分数组和对象

· 3.0兼容IE12以上

· composition api 可以和 options API 同时存在

开启vue3.0学习之旅