在手机上开启USB调试

1. 进入设置->我的设备->全部参数->狂点<MIUI版本>
2. 设置->更多设置->开发者选项

安装HomeBrew

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安装node

https://qizhanming.com/blog/2020/07/29/how-to-install-node-using-nvm-on-macos-with-brew

在父组件控制子组件显示, 子组件顶层为Popup弹出层, 父组件直接控制子组件Popup的v-model属性
Popup关闭时, 不会主动触发父组件的data属性值
此时需要子组件显式改变父组件data属性值

# 父组件
data: function(){
  return {
    showPreview: false
  }
}
<ImagePreview
  :showPreview.sync="showPreview"
/>
# 子组件
<template>
  <Popup 
     v-model="showPreview"
     @close="$emit('update:showPreview', false)"
  />
</template>
props: {
  showPreview: {
    type: Boolean,
    default: false
  }
}

https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修饰符

页面定义一个绝对定位元素

<div id="abs"></div>

  #abs {
    position: absolute;
    height: 0;
    width: 0;
  }

页面路由添加一个锚点选参

{
    path: "/index/:anchor?",
    name: "Index",
    meta: {
      title: "XXX",
      keepAlive: false,
    },
    component: () => import("@views/Index.vue")
}

// 页面加载后, 计算位置并跳到相应的位置

mounted: function() {
    this.$nextTick(() => {
      if (this.$route.params.anchor) {
        setTimeout(() => {
          var anchor = document.querySelector("#abs");
          anchor.style.top =
            document.querySelector("#" + this.$route.params.anchor).offsetTop -
            document.querySelector("#header").offsetHeight -
            30 +// 如果有固定头部, 酌情添加高度
            "px";
          anchor.scrollIntoView();
        }, 500);
      }
    });
  }

如果data中的数据对象没有此属性, 首次设置不会触发响应式更新
此时需要显式赋值

data: function(){
  return {
    list: {
      {name: 'xx'},
      {name: 'xx'}
    }
  }
}
....
this.list[index].show = true; // × 无效
this.$set(this.list[index], "show", true); // ✔️ 成功

Vue3 需要手动更新, 在组件上设置动态key即可

<nut-picker mode="selector" :key="'color'+new Date().getTime()"
       v-bind:list-data="color_options"
       @confirm="confirmColor"
>
   <nut-cell title="颜色" :desc="color" is-link class="field"></nut-cell>
</nut-picker>