2022-05-28

Vue Created Mounted example

最近遇到一個 Issue，我們本來有跟 Partner 整合一個功能，做法是類似先 Inject 對方的 js，
接著去指定一個 element 讓他生成到對應的頁面位置，因為當初開發的時候大家都是新手邊做邊學，
一開始把 init script 的方法放到 created function，會造成一個問題是 element 都還沒有被掛到 html 上面就先呼叫 init script
有可能會無法生成畫面，但是神奇的是當初寫沒有發現問題，等到有一天可能 Partner 突然有改 JS 的流程，造成我們整個頁面壞掉。
所以又再回頭去 review code 才發現應該要放到 mounted

<script
  async
  id='__ada'
  data-handle='<YOUR-BOT-HANDLE>'
  src='https://xxx.xxx.com/embed2.js'
></script>

正確就是要放到 mounted 上面

export default {
  created() {
    //element not create
  },
  mounted() {
    //element created
  },
};

這裡附上 Kuro Hsu 的 Vue2 vs Vue 3 Life cycle 參考

Reference

2022-05-07

UC Browser Support

在開發 Global 的網頁的時候，通常會去評估各種網頁的支援度，如果沒有通常會請放 Upgrade your Browser.

因為 UC Browser 在中國大陸其實還是有一些比較舊的手機在使用，剛好在開發 Vue 的時候遇到一些問題順便記錄下來

使用的 Framework and config

Vue 3 with Vite
Tailwind CSS 3 (Dark Mode)

想要支援舊版的 UC Browsr

瀏覽器支援度

一開始以為是 ES module 導致 Build 出來有問題
ES Module

Dynamic Import

所以針對這點我們有安裝了plugin-legacy plugin

但是還是遇到問題，基本上 UC 瀏覽器 13 以上 legacy plugin 才有用，但是當下發現 CSS 有跑版.. 然後回頭去看發現有這行敘述

Now instead of dark:{class} classes being applied based on prefers-color-scheme,
they will be applied whenever dark class is present earlier in the HTML tree.

再回頭去查詢發現其實到最新版本的 UC 瀏覽器才有支援這個設定….
prefers-color-scheme