本篇文章主要講解 Vue 時 發(fā)生了什么 箭阶？
我們需要在 index.html 文件 ，先按照vue的書寫方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./dist/umd/vue.js"></script>
<body>
<h3>測試</h3>
<div id="app"></div>
<script>
new Vue({
el: "#app",
data() {
return {
a: 101
}
}
})
</script>
</body>
</html>
這個大家應(yīng)該很熟悉了 氏仗，我們用vue 的時候都有這個文件矫夷，Vue 的實(shí)例化對象。
既然這里都 new Vue 對象了 霹陡， 那我們肯定的有一個 Vue 類了 和蚪。
我們在 src/index.js 文件里 寫個類。
// export const fn = () => {}
function Vue(options) {
// 入庫方法 初始化操作
this._init(options)
}
Vue.prototype._init = function(options) {}
export default Vue
寫到這里可能有的人會問 烹棉，既然寫類文件 為什么不用 class 呢 攒霹？
我寫段代碼大家看下 就明白了。
class Vue{
fn1() {
}
fn2() {
}
fn3() {
}
fn4() {
}
fn5() {
}
fn6() {
}
......
}
這樣的話 可能就如上面所示了 浆洗，我們的把很多方法 或者屬性 都添加寫到這個類文件中.
總結(jié)一句話： 使用構(gòu)造函數(shù)的方式 就是為了解耦 方便擴(kuò)展 催束。
接下來 我們只需要把方法，寫成一個個小的插件的形式 掛載到原型上就可以了伏社。
-新建 src/init.js 文件 抠刺，把_init() 初始化方法單獨(dú)在這里操作
export function initMixin(Vue) {
Vue.prototype._init = function(options) {
console.log(options, '測試123')
}
}
接著把該文件引入到 Vue類文件中去
// export const fn = () => {} // 這是之前的測試，可刪除
import { initMixin } from './init'
function Vue(options) {
// 入庫方法 初始化操作
this._init(options)
}
initMixin(Vue) // 寫成插件摘昌，方便解耦
export default Vue
這是我們可以先編譯看下：
npm run dev
這里我們就應(yīng)經(jīng)打印出 Vue傳過來的對象了 速妖。
這是我們需要把之前的代碼稍微改造下
首先 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./dist/umd/vue.js"></script>
<body>
<h3>測試</h3>
<div id="app"></div>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
a: 101
}
}
})
console.log(vm.$options); // 接收返回 vue 的實(shí)例
</script>
</body>
</html>
然后init.js文件
export function initMixin(Vue) {
Vue.prototype._init = function(options) {
// console.log(options, '測試123')
const vm = this
vm.$options = options
}
}
這里我們同樣可以打印出 。
最后我們把用戶傳過來的狀態(tài)單獨(dú)建個文件 src/initState.js
export function initState(vm) {
console.log(vm, '測試vm')
}
init.js 文件調(diào)用下
import { initState } from './initState'
export function initMixin(Vue) {
Vue.prototype._init = function(options) {
// console.log(options, '測試123')
const vm = this
vm.$options = options
initState(vm) // 初始化狀態(tài) 單獨(dú)建個狀態(tài)文件 initState.js
}
}
沒問題 聪黎，這里我們也接收到了罕容。
這是我們就可以根據(jù)傳過來的不同選項(xiàng) ， 做不同的初始化操作稿饰。
初始化狀態(tài)
export function initState(vm) {
console.log(vm, '測試vm')
const opts = vm.$options
if (opts.props) {
initProps(vm) // 初始化屬性
}
if (opts.methods) {
initMethods(vm) // 初始化方法
}
if (opts.data) {
initData(vm) // 初始化數(shù)據(jù)
}
if (opts.computed) {
initComputed(vm) // 初始化計算屬性
}
if (opts.watch) {
initWatch(vm)
}
}
function initProps(vm) {}
function methods(vm) {}
function initData(vm) {
// 數(shù)據(jù)初始化
let data = vm.$options.data
console.log(data)
}
function computed(vm) {}
function initWatch(vm) {}
這是我們數(shù)據(jù)也打印出來了锦秒。
下一篇： 2. Vue的數(shù)據(jù)攔截（對象） , 更多請關(guān)注：2020 - Vue 源碼解析與實(shí)現(xiàn)
