Vue3 的初次學習

vue3 出來了，真是乙個激動人心的時刻，可是我又要學習了，開心(bushi

src="">

script>

tipcli 工具假定使用者對 node.js 和相關構建工具有一定程度的了解。如果你是新手，我們強烈建議先在不用構建工具的情況下通讀指南，在熟悉 vue 本身之後再使用 cli。

對於 vue 3，你應該使用npm上可用的 vue cli v4.5 作為@vue/cli@next。要公升級，你應該需要全域性重新安裝最新版本的@vue/cli：

yarn global add @vue/cli@next

# or
npm install -g @vue/cli@next

vue upgrade --next

通過在終端中執行以下命令，可以使用 vite 快速設定 vue 專案。

使用 npm：

$ cd

$ npm install

$ npm run dev

或者 yarn：

$ cd

$ yarn

$ yarn dev

顯然在vue3中template不再一定需要乙個父元素才能編譯通過了。

2.2.1、關於setup

setup函式其實是乙個生命週期鉤子，它對應的其實就是vue2中的 beforecreate 和 create

在vue3中我們通過這個函式來定義vue2中的 data,methods,watch,computed 屬性(資料定義與處理相關)

2.2.2、setup使用

setup函式必須有返回值，必須返回乙個物件，物件裡包含所有在template模板中需要使用到的屬性(包含data,methods等)

setup函式有乙個props引數，用於接收props，也就是定義在元件上的屬性(同vue2),但是接收的props必須先在props屬性中定義，否則是不會被接收到的

下面是乙個setup的使用示例：

count is: }

// 我們在這裡通過ref函式定義了乙個變數count,ref函式是乙個把普通變數變成proxy響應式變數的函式。

使用示例：

setup(props) ;

},// 用ref定義的變數，如果需要取到其變數值，需要使用.value屬性
比如：setup(props) 
return ;
},我們用changecount替代上述setup示例模板的count++
count is: }

ref的呼叫用法

這裡的onmounted與vue2中的mounted是一樣的，是vue3的生命週期新用法

reactive函式和ref作用非常接近，但是它的引數是乙個物件，我們可以在物件中定義其方法，而通過這個形式，就不需要再對其進行進行.value呼叫了

使用示例如下：

count is: }

ps：由於reactive返回的物件本質上已經是乙個proxy物件，所以通過…擴充套件符號展開的屬性，是無法進行響應式的，也就是

return

並不能如同預期結果般起效

如果實在需要使用拓展符號，需要使用torefs這個api

count is: }

而在vue3中，生命週期新增了on字首，需要匯入並寫在setup()函式中

vue3學習筆記

vue3 1.context.emit update xx props.xx 可 v model xx更新xx的值 個人記憶，雙向繫結 需要雙向改變的值 代替 vue2 sync 2.元件上繫結的事件預設是繫結第一層，可使用inheritattrs false 取消預設，在需要繼承的屬性的標籤使用v...

vue3學習總結

v model 2.x語法 title.sync oldvalue childcomponent this emit update title newvalue 3.x語法v model title oldvalue childcomponent 所有v model不到引數，一定要改變道具和事件名稱...

Vue3學習記錄（二）

vue2中有data computed method等，我們有時候尋找乙個變數或者函式就需要翻閱整段 vue3提出了組合式api，並且提出了可以使用組合式api的地方 setup。p click add 加1button div template import from vue export def...