>[warning]vue類的實現
****
還記得Vue應該怎么使用吧? 看最下面代碼
代碼如下:
~~~
<script>
// 1. 修改觀察者, 接收參數
function Watcher(vm, cb, exp) {
this.vm = vm; // 虛擬DOM對象(vue實例對象)
this.cb = cb; // 對應執行的function方法體
this.exp = exp; // 監聽哪個屬性
this.value = this.get(); // 調用一下下面的get方法, 把watcher對象提交到Dep訂閱者中
}
Watcher.prototype = {
// 2. 修改update方法, 觸發后把新值回調給new Watcher的地方
update: function() {
// 拿到vue的data中的key對應的value
let value = this.vm.data[this.exp];
// 獲取原有的value值
let oldVal = this.value;
if (value !== oldVal) {
// 把新值更新一下
this.value = value;
// 值不同, 則調用Watcher執行, 把新的值傳過去
this.cb.call(this.vm, value);
}
},
get: function() {
Dep.target = this;
// 強制執行Object.defineProperty里的get方法, 把觀察者添加到Dep訂閱者數組中
let value = this.vm.data[this.exp];
Dep.target = null;
return value;
}
};
// 3. 定義Vue類, 接收參數和監聽的key (注意暫時這里只能接收一個key)
function Vue (options, exp){
// 獲取data對象
this.data = options.data();
// 獲取el根節點
let el = document.querySelector(options['el']);
// 觸發Observer監聽data里所有key
observe(this.data);
// 初始化模板數據的值
el.innerHTML = this.data[exp];
// 實例化Watcher, 傳入Vue實例對象, 以及回調函數, 還有要觸發監聽的key值
// 4. Watcher執行, 更新el節點里的值
new Watcher(this, function(value){
el.innerHTML = value;
}, exp);
// 5. 返回Vue實例對象
return this;
}
</script>
<div id="app">{{userName}}</div>
<script>
// 6. 仿照Vue定義, 傳入需要的參數
let app = new Vue({
el: "#app",
data () {
return {
"userName": "hello VueJS"
}
}
}, "userName");
setTimeout(()=>{
app.data.userName = "漂亮";
}, 2000);
// 這時, 我們發現雛形已經出來了, 但是還有點不一樣, 但是我們在控制臺修改app.data.userName 確實實現了數據的綁定, 頁面發生了變化.
</script>
~~~
[當前頁源代碼](https://github.com/lidongxuwork126com/ldx_vue/tree/master/%E4%BB%BFVue%E6%BA%90%E7%A0%81)
但是我們發現訪問data屬性必須先.data再.key, 很明顯這是不行的, 看下文如何改動
- web前端
- CSS問題
- 布局
- 雙飛翼布局_flex方式
- 雙飛翼布局_margin方式
- 圣杯布局_flex方式
- 圣杯布局_margin方式
- 子元素居中問題
- 彈性布局
- 概念_
- 標準模式與混雜模式
- 各種FC
- line-height
- vertical-align
- CSS3新特性
- 效果
- div添加箭頭
- CSS繪制三角形
- JavaScript
- 兼容
- 事件相關
- 原理
- Ajax原理
- 繼承原理
- 原型鏈繼承
- 組合繼承
- 寄生組合繼承
- 數據綁定
- 1單向數據綁定m到c到v
- 2偽雙向數據綁定
- 3雙向數據綁定
- socket.io
- 運行時
- this指向
- 0.1+0.2問題
- 對象/數組-深拷貝&淺拷貝
- 事件循環
- typeof
- instanceof
- 概念
- 閉包
- 回調函數
- Promise
- 原生對象
- Attribute和property區別
- 防抖函數
- 節流函數
- 語言類型
- Vue
- Vue優缺點
- 仿Vue源碼
- 1數據綁定_Observe
- 2數據綁定_訂閱者&觀察者定義
- 3數據綁定_Vue類實現
- 4數據綁定_Vue訪問data更改
- 5DOM編譯_Compile_雙大括號模板講解
- 6DOM編譯_v-model講解
- 7DOM編譯_v-on:事件綁定講解
- 項目總結
- 使用Svg圖標
- vueCli環境_真機測試
- vueCli集成環信SDK
- 父子組件雙向綁定
- React
- React優缺點
- 我的組件庫
- Vue的組件庫
- 環信_聊天組件
- 面試題
- HTML_分類
- CSS_分類
- JavaScript_分類
- VueJS_分類
- ReactJS_分類
- AngularJS_分類
- 瀏覽器端
- 筆試題
- CSS
- 特殊布局
- JavaScript_
- 經典_宏任務_微任務
- 瀏覽器問題
- CORS
- web服務器
- Apache
- 開啟跨域
- Nginx
- 常用命令
- 正向代理
- 反向代理
- 負載均衡
- mac安裝Nginx
- 配置80端口
- 算法
- 冒泡排序
- 選擇排序
- 合并對象_排序
- 楊輝三角
- 紅黑樹
- 計算機基礎
- 網絡相關
- OSI七層模型
- http協議
- http工作原理
- https協議
- GET和POST區別
- hosts文件
- php相關
- session機制
- Linux
- 阿里云服務器
- linux使用Mysql
- 安裝mysql
- 導入.sql文件
- 遠程連接mysql
- linux使用xampp
- 安裝Xampp
- 配置web訪問
- 域名綁定服務器
- linux搭建git服務器_apache下
- 代碼管理
- 什么是git
- 命令行_使用git
- .gitignore文件講解
- 軟件
- VSCode的安裝
- 理財
- 基金
- 攝影