current position:Home>Four step simple implementation of watch in Vue
Four step simple implementation of watch in Vue
2021-08-27 02:00:24 【Old fish eat shrimp】
watch Use
This article is mainly about watch( It can also be called observer mode ) The implementation of the , So how to use direct look at the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{count}}</p>
<button @click="add">add</button>
</div>
<script> let app = new Vue({ el:'#app', data:{ msg:'Hello world', count: 0 }, methods: { add(){ this.count++ } }, // watch watch:{ // The function name must be the same as data Only when the object names in the data source are consistent can you listen count(newVal,oldVal){ // If the latest value is greater than 10 The modified data Medium msg attribute if(newVal>=10) this.msg = 'Hello Watch' } } }) </script>
</body>
</html>
Copy code
What we need to know is :
- watch The function name must be data Of objects in the data source key value , That's how it works data The data source corresponds to key Value object .
- watch The function in takes two arguments , The first parameter is the new value assigned to , The second parameter is the initial value .
- understand Object.defineProperty Characteristics of
Realization
First step , Clear requirements
demand : Implement a constructor , You can put data Data sources and watch Method ,watch The function name in corresponds to data Key name in , You can hear... In the corresponding function data The data of the corresponding object in ( The data was hijacked ).
let vm = new Watcher({
data: {
a: 0,
n:'hello'
},
watch: {
a(newValue, oldValue) {
console.log(newValue,oldValue);
}
}
})
setTimeout(() => {
vm.a = 1
}, 2000)
// Print out 1 0 The requirements are realized
Copy code
Understand the needs , Next, let's implement it
The second step , Build constructor
First ,Watcher The constructor has one argument , The parameter should include data and watch, So we need to judge whether we can get... In the parameters data and watch, And you need to use a function to judge data and watch Is it an object
class Watcher{
constructor(args) {
// Judge whether the passed in parameters meet the conditions
this.$data = this.getBaseType(args.data) === "Object" ? args.data : {}
this.$watch = this.getBaseType(args.watch) === "Object" ? args.watch : {}
}
getBaseType(target) {
const typeStr = Object.prototype.toString.call(target) // "[Object String]"
// Return type
return typeStr.slice(8, -1)
}
}
Copy code
The third step , monitor data The object in
If the parameter is passed in data and watch All objects , Get started The data was hijacked , send data Every object in the is monitored .
class Watcher {
constructor(args) {
this.$data = this.getBaseType(args.data) === "Object" ? args.data : {}
this.$watch = this.getBaseType(args.watch) === "Object" ? args.watch : {}
// Traverse data Each of them key,for in Can also be , It can traverse the... Of the object key
Object.keys(args.data).forEach(key => {
this.setData(key)
})
}
getBaseType(target) {
const typeStr = Object.prototype.toString.call(target)
return typeStr.slice(8, -1)
}
setData(_key) {
// Object.defineProperty(this) Will point the context to the current object
// there this It's equivalent to... In the constructor this.$data
Object.defineProperty(this, _key, {
get: function () {
},
// // Corresponding value _key A change in the value of will trigger set
set: function (val) {
// val Corresponding key The modified value of the object
console.log(val)
}
})
}
}
Copy code
Be careful :defineProperty The first parameter is not this.$data
It is this
, Here is a puzzling point , See the notes for the specific reasons , You might say why not this.$data
As the first parameter , But obviously , since defindProperty Inside this It's already equivalent to... In the constructor this.$data
, that defindProperty Inside this.$data
It's equivalent to... In the constructor this.$data.$data
. I hope this explanation will dispel your doubts .
Step four , Realization
perfect defineProperty The structure in , Here's the key , Look at the code here to better understand
class Watcher {
constructor(args) {
this.$data = this.getBaseType(args.data) === "Object" ? args.data : {}
this.$watch = this.getBaseType(args.watch) === "Object" ? args.watch : {}
// Traverse data Each of them key
Object.keys(args.data).forEach(key => {
this.setData(key)
})
}
getBaseType(target) {
const typeStr = Object.prototype.toString.call(target) // "[Object String]"
// Return type
return typeStr.slice(8, -1)
}
setData(_key) {
// Object.defineProperty(this) Will point the context to the current object
// there this It's equivalent to... In the constructor this.$data
Object.defineProperty(this, _key, {
get: function () {
return this.$data[_key]
},
set: function (val) {
// Corresponding value _key A change in the value of will trigger set
// First get the value before modification
const oldVal = this.$data[_key]
this.$data[_key] = val
// The definition here stipulates watch The format must be the same name , And be a function
this.$watch[_key] && this.getBaseType(this.$watch[_key]) === "Function" && (
// call watch Function in and pass parameters
this.$watch[_key].call(this, val, oldVal)
)
}
})
}
}
// testing
let vm = new Watcher({
data: {
a: 0,
n: 'hello'
},
watch: {
a(newValue, oldValue) {
console.log(newValue, oldValue);
}
}
})
setTimeout(() => {
vm.a = 1
}, 2000)
//1 0
Copy code
It's easy to implement here , Actually vue in watch Much more complicated than this , But what we learn is an idea , Understand the requirements and then replace them with ideas , This is very helpful for learning the source code .
The above is the realization watch Four steps of , I hope it will help the readers . If there are any mistakes, please comment and discuss .
copyright notice
author[Old fish eat shrimp],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827020021365s.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich