vue作为一个响应式框架，降低了dom动态渲染的开发成本。
CSS的使用
主要是关于布局、长度、颜色、选择器等相关用法
uni-app x 在 app平台实现了 web css 的子集。
这个子集有时也被称为 ucss。
浏览器、Android原生、iOS原生，都有自己的布局和样式设置系统。
ucss这个子集，是抽取了web和app的共同能力，并通过web的css写法来设置原生布局和样式。
App端与web常见的区别是：
- 仅支持flex 布局和绝对定位：这是web、iOS、Android均支持的布局方式
- 选择器只能用 class 选择器，不能用tag、#id、[attr]等选择器，目前class选择器不支持除A-Z、a-z、0-9、_、- 之外的字符
- 样式不继承，即父元素样式不影响子元素
为了跨平台一致性和性能，uni-app x编译到web时，默认的布局也重置为了flex.
在W3C规范中，flex 默认是横向的，但uni-app x里全平台的flex方向默认值都是纵向的。
在uni-app x中也是，文本必须使用<text>组件，<view>组件就是容器组件，它的style里不应用使用与文本修饰相关的样式，比如文字颜色、大小等。
app-uvue的css的“样式不继承”规则，虽然与web有差异，其实只是更严谨。
一般情况下，开发者遵循仅在text组件下写文字有关的样式，就可以编译到全端而保持界面正常。
app中，设置样式只有内联样式即style属性和class属性这两种方式。它们只遵循1个简单规则：内联样式(即style属性)优先级高于class选择器、class选择器之间的优先级遵循web规范。
正确的屏幕适配做法是：使用 px + flex:1铺满剩余空间。确定清楚哪些是固定值，哪些是根据屏幕宽度和高度自动撑满，分别设置好px和flex:1
有些开发者误以为只有rpx才能在适配好大小屏幕，他们担心使用px，会在小屏幕上超级大。这个理解恰恰反了。
其实px不是物理像素，px也是逻辑像素。正常使用px，在所有屏幕上都有合适的大小 。所以推荐开发者尽量使用px。
uvue的使用
主要是继承了vue的响应式、SFC（单文件组件）的特性。简化了dom操作的开发。
vue.js 并不支持web之外的其他平台，也不支持uts。
uni-app x 为vue开发者提供了跨平台的解决方案。
在 uni-app x 中，页面和组件的文件后缀名均为 *.uvue。
在非web平台，uvue 尽可能拉齐了vue.js的功能，但仍有些不常用的功能暂未提供，同时 uvue 也新增了 easycom 等技术，简化组件的使用。
一个 uvue 页面/组件，符合vue单文件组件规范（SFC），有3个根节点标签：
- 模板组件区
<template> - 脚本区
<script> - 样式区
<style>
注意html中，根节点是<html>，<script>和<style>是子节点。但在uvue中，这3个节点都是一级节点。
html 中写的是 web 标签，但 vue 的 template 中写的全都是 vue 组件（包括内置基础组件、自定义前端uvue组件、uts原生插件组件），每个组件支持属性、事件、vue 指令，还可以绑定 vue 的 data 数据。
在 uni-app x 中， <view>是最基本的视图容器组件，<text>则是文字组件，<button>是按钮组件。这些都是内置组件
一个页面或组件只能有一个template标签，template下面可以有多个二级节点，即多个根组件。 uvue中只能有一个script标签。一个页面/组件允许有多个style标签。 style通过lang属性，可以支持less、scss、stylus等css预处理语言。
setup setup属性声明代表script里的代码为组合式写法，如果没有setup属性则为选项式写法。
注意： 所有 vue 公开的 API 都是不需要 import 的, uni-app x 会自动引入。
选项式的type类型定义在export default {}外，这些都是应用级全局的，略微影响性能
组合式提供了更灵活自由、更简洁的编程方式，通过代码而不是通过规范约定死的选项来定义data、method和生命周期。
一般推荐的建议是：
- 如果有历史的选项式代码需要复用，这些选项式代码仍然可以使用。
- 如果新写页面和组件，建议直接使用组合式。
选项式主代码在export default {}里。但既然有export default {}里的代码，那么就有 export default {} 外面的代码。
写在外面一般有几种情况：
-
引入第三方 uts 模块
-
引入非 easycom 的组件（一般组件推荐使用easycom，无需导入注册）
-
定义 type，对 data 进行类型定义
-
定义作用域更大的变量
开发者应谨慎编写 export default {} 外面的代码，这里的代码有2个注意事项：
- 影响应用性能。不管写在哪个页面，这部分代码都在应用启动时执行，而不是页面加载。如果
export default {}外的代码写的太复杂，会影响应用启动速度，占用更多内存。 - 不跟随组件、页面关闭而回收。在外层的静态变量不会跟随页面关闭而回收。如果必要，你需要手动处理。比如
unmounted或onUnload生命周期进行处理。
数据绑定模型
在组合式里，定义响应式变量是ref()，在选项式里，定义方式是在data里return。
响应式变量被绑定到UI界面后（template和style都可以），在逻辑script中修改变量，UI界面会自动更新。省却再编写dom代码操作UI。
ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回。这个对象，
- 在 uts 中取值时，需要使用
.value属性。 - 而在模板中使用 ref 时，不需要附加
.value（为了方便起见，在模板中使用时，ref 会自动解包，这样模板里的写法和选项式保持了一致）。
当使用 Options API data 或 Composition API 的 ref 、 reactive 定义了响应式数据后，可以在模板中使用。
- 组件的text区域，使用
{{}}语法绑定数据。这常见于<text>组件。 - 组件的vue指令中，直接写变量名称。
单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态
这个语法同样也适用于 <script setup>，且支持 UTS 表达式 (需要用引号包裹起来)
v-bind 也可在样式中使用，可以很方便的在 uts 中改变样式。
欢迎关注
