How to listen to local storage in real time
In
.$addStorageEvent = function (type, key, data) {
if (type === 1) {
// Create a StorageEvent event var newStorageEvent = ('StorageEvent');
const storage = {
setItem: function (k, val) {
(k, val);
// Initialize the created event ('setItem', false, false, k, null, val, null, null);
// Distribute the object (newStorageEvent);
}
}
return (key, data);
} else {
// Create a StorageEvent event var newStorageEvent = ('StorageEvent');
const storage = {
setItem: function (k, val) {
(k, val);
// Initialize the created event ('setItem', false, false, k, null, val, null, null);
// Distribute the object (newStorageEvent);
}
}
return (key, data);
}
}
Trigger when you want
this.$addStorageEvent(2, "butCountNum", );
Listen in the mouted hook function
('setItem', (e) => {
if( === "butCountNum"){
//Writing logic }Vue listening data changes
Listening for data changes is implemented in Vue through listeners. You can also understand it as a listener, always listening for changes in a certain data.
Basic usage of watch
Previously, we added data and methods in js, and this time we want to add the watch attribute. Let's first look at the location of the listener to be added:
<script>
export default {
name: "app",
// data data() {
return {};
},
// method methods:{},
// Listener watch:{}
};
</script>A simple example:
<template>
<p>How many times you click the button： {{ count }} </p>
<button @click="add" v-model="count">Click</button>
</template><script>
export default {
name: "app",
data(){
return {
count:0
}
},
methods:{
add(){
++;
}
},
watch:{
// The variable being listened to count(){
('count changed');
}
}
};
</script>Listeners are more used in asynchronous operations. The so-called asynchronous operations are operations with delayed data return. For example, if we want to request the interface of the backend, the interface will return data to us, and then we render the data on the page.
From the request interface to the return data, it takes a certain amount of time. At this time, we can use the listener to listen for the returned data. When the data is returned, we trigger rendering.
Simulate a pseudo-asynchronous operation:
<template>
<input type="text" v-model="inputValue">
<p>Data obtained from the input box：{{ passedInputValue }}</p>
</template><script>
export default {
name: "app",
data(){
return {
inputValue: '',
passedInputValue: ''
}
},
watch:{
inputValue() {
// When the inputValue data changes, the delay is assigned to the passedInputValue for three seconds setTimeout(() => {
= ;
}, 3000)
}
}
};
</script>At this time, you will find that after you enter text in the input input box, the data in the p tag will not be changed immediately, but will be rendered after three seconds.
Get the previous value
In some scenarios, we will need the last data, and at this time, the listener can give us two values, the old value and the new value.
Based on the previous case, we only need to add one parameter to get the old value, the code is as follows:
watch:{
inputValue(value,oldValue) {
// The first parameter is the new value, the second parameter is the old value, and the order cannot be changed (`New value：${value}`);
(`Old value：${oldValue}`);
}
}handler method and immediate attribute
As we have already known before, the listener will not be triggered when the value we listened to has not changed, and the listener will not be triggered when the page is rendered for the first time.
But now I have a need to trigger the listener when the page is rendered for the first time?
At this time, a method and a property must be used.
<template>
<p>FullName: {{fullName}}</p>
<p>FirstName: <input type="text" v-model="firstName"></p>
</template><script>
export default {
name: "app",
data(){
return {
firstName: 'Su',
lastName: 'Junyang',
fullName: ''
}
},
watch:{
firstName: {
handler(newName, oldName) {
= newName + ' ' + ;
},
// If false is set, the listener will not be triggered after the first rendering of the page immediate: true
}
}
};
</script>deep deep listening
The so-called depth listening is the value of the internal attributes of the object.
The listeners we used before could only listen for changes in one variable (focus on the comments in the code) For example:
data:{
return {
// The string changes and can be listened firstName: 'Su',
room:{
name:"Double Bed Room",
// When the room number changes, the listener cannot listen. // Because the listener only listens to the room, it cannot listen to number or name number: 302
}
}
},At this time we need deep listening.
Deep listening is not difficult to implement in code. You only need to add a deep attribute based on the handler. The code is as follows:
watch:{
room:{
handler(newRoom,oldRoom){
("The room number has changed")
},
deep: true
}
}Case: Use listeners and timers to implement pseudo-fuzzy search
<template>
<div class="search">
<input type="text" v-model="inputValue" />
<div class="search-block" v-for="(element, index) in results" :key="index">
{{ element }}
</div>
</div>
</template><script>
export default {
name: 'app',
data() {
return {
results: [],
mockData: [
'Zhejiang University',
'Renmin University of China',
'Tsinghua University',
'Tsinghua University Affiliated Middle School',
'Zhejiang University of Science and Technology',
'Zhejiang University of Technology'
],
inputValue: ''
};
},
watch: {
inputValue(value) {
if (!!value) {
setTimeout(() => {
= (el => {
(value);
return (value) !== -1;
});
}, 300);
}
}
}
};
</script>The above is personal experience. I hope you can give you a reference and I hope you can support me more.