NickH

前言 Taro社区提供的css in js 方案，在Taro3上面基本都存在问题，没法使用。综合各种因素，我最终选择Scss + Tailwind CSS作为项目的CSS解决方案 Scss Scss的

接上文Taro实现兼容H5的沉浸式页面 我们来实现一个自动显示/隐藏的导航栏 目标 页面向下滚动，导航栏跟随滚动进行隐藏 页面向上滚动到顶，导航栏逐渐显示 当次向上滚动距离超过30px，导航栏组件显示

什么是沉浸式页面 以小程序为例 默认情况下小程序页面自带导航栏，页面内容不会覆盖到导航栏上面 将页面属性navigationStyle设置为custom，可以隐藏导航栏，从而实现页面侵入到状态栏的效果

vue版本：v2.7.10 上面是创建一个Vue应用的代码，App组件作为参数传递到h函数中，实现应用的渲染。 App.vue文件是通过什么方式解析的呢，我们在终端输入vue inspect > ou

vue版本：v2.7.10 src/platforms/web/runtime/index.ts src/core/instance/lifecycle.ts 看一下Vue元素挂载函数：$mount

vue版本：v2.7.10 首先看一下数据初始化函数initData。 src/core/instance/state.ts initData最核心的的实现是observe(data)，而observ

vue版本：v2.7.10 Watcher有三种类型 Watch Watcher Computed Watcher 渲染Watcher Watch Watcher 即通过Vue原型的$watch生成的

vue版本：v2.7.10 src/platforms/web/runtime/index.ts 挂载元素的实现在mountComponent函数中 src/core/instance/lifecyc

vue版本：v2.7.10 src/core/instance/state.ts initProps 将vm.$options.propsData转化为响应式数据，挂到vm._props上，通过vm代