v-model的實現原理 vue


基礎用法:

v-model 本質上不過是語法糖,常見可以用 v-model 指令在表單 <input><textarea> 及 <select> 元素上創建雙向數據綁定。

本質上:

v-model是vue的一個語法糖,一個是v-bind去單項綁定vue實例里面的data數據,然后再通過各種事件比如@change @input等去進行觸發事件修改實例數據的值,

如果在vuex中需要去綁定store里面的數據,則需要通過dispatch一個action,然后action再去提交mutation修改store里面的值

底層實現:

核心是Object.defineProperty()方法,那接下來我們就簡單介紹一下!
語法:

Object.defineProperty(obj, prop, descriptor)
其中:
obj
要在其上定義屬性的對象。
prop
要定義或修改的屬性的名稱。
descriptor
將被定義或修改的屬性描述符。

其實,簡單點來說,就是通過此方法來定義一個值。
調用,使用到了get方法,
賦值,使用到了set方法。
我們來看個例子熱熱身:

沒過癮?

那再看這鏈接中寫的更詳細,3分鍾左右即可食用完

 

 

https://www.cnblogs.com/youguo2/p/14116013.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM