手把手带你用 Vue 3.0 写个小程序框架
发表时间：2021-1-4
发布人：葵宇科技
浏览次数：80
1、Vue3 部分新特性
Composition API、Teleport、Fragments 和 <script setup /> & <style vars /> 等。1. Composition API
Option API（选项 API ）构建组件，一般来说组件拥有 data、methods、computed 等选项。这是一种属性相互隔离的模式，好处是各属性内容分离开，对于新手来说比较友好。Composition API 方式（组合 API ），基于 reactivity（响应式）的思想进行组件构建，将逻辑封装到函数中，可以实现类似 React Hooks 的逻辑组合和重用。
2. Teleport（传入）
3. Fragments（碎片）
<template /> 标签下不支持放置多个组件，这个限制在 Vue3 中不再存在。这点比较好理解，下述组件设计在 Vue3 中是没有问题的：<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>4. 实验性质的语法糖 <script setup>、<style vars>
、<script setup>:用于在 SFC 中使用 Composition API 的语法糖，改善在单个文件组件中使用 Composition API 时的体验。<style vars>: SFC 中状态驱动的 CSS 变量，它提供了直接的 CSS 配置和封装，支持将组件状态驱动的CSS变量注入到“单个文件组件”样式中。2、小程序
index.js
有一个 Page 函数，里面是对象配置，类似于 Vue 的 options 配置一样，有一个 data 属性，存放着初始化的数据。
如果想要修改数据改变视图，又需要像react一样，需要调用 setData 去修改视图。
index.ttml
类似于 vue 的 template，我们需要先定义模板才能显示视图
注意： 不能直接在 index.js 里面去修改定义的模板的 DOM，只能先定义好，这是由于小程序架构双线程导致的，分为逻辑层和渲染层，我们写的 index.js 代码跑在逻辑层里面，index.ttml 跑在渲染层里面，两个线程就通过 setData 进行数据交换。
index.json
index.ttss
模板
动态模板
// 使用这个模板 <template is="{{type}}" data="http://www.wxapp-union.com/{{item: item}}"/>自定义渲染层
`createRenderer`函数需要两个参数，一个是patchProp，一个是nodeOps。nodeOps
VNode
。
toJSON()
path()
编译层
