How to use Vue.js+computed
This time I will show you how to use Vue.js computed, and what are the precautions for using Vue.js computed. The following is a practical case, let's take a look.
JS properties:
JavaScript has a feature called Object.defineProperty
, which can do many things, but I In this article, we only focus on one of these methods:
var person = {}; Object.defineProperty (person, 'age', { get: function () { console.log ("Getting the age"); return 25; } }); console.log ("The age is ", person.age); // Prints: // // Getting the age // The age is 25
(Obeject.defineProperty is a method of Object. The first parameter is the object name, and the second parameter is the name of the property to be set. The three parameters are an object, which can set whether this property can be modified, writable, etc. This article mainly uses the accessor property of Object.defineProperty. Interested friends can google or check JS High and Programming )
Although person.age looks like it accesses a property of the object, internally we are running a function.
A basically responsive Vue.js
Vue.js internally builds an object that can convert ordinary objects into values that can be observed (responsive properties). The following shows you a simplified version of how to add response attributes:
function defineReactive (obj, key, val) { Object.defineProperty (obj, key, { get: function () { return val; }, set: function (newValue) { val = newValue; } }) }; // 创建一个对象 var person = {}; // 添加可响应的属性"age"和"country" defineReactive (person, 'age', 25); defineReactive (person, 'country', 'Brazil'); // 现在你可以随意使用person.age了 if (person.age < 18) { return 'minor'; } else { return 'adult'; } // 设置person.country的值 person.country = 'Russia';
Interestingly, 25 and 'Brazil' are still variables inside the closure, and val only becomes valid when new values are assigned to them. will change. person.country does not have the value 'Brazil', but the getter function has the value 'Brazil'.
Declaring a computed property
Let’s create a function defineComputed that defines a computed property. This function is the same as when you usually use computed.
defineComputed ( person, // 计算属性就声明在这个对象上 'status', // 计算属性的名称 function () { // 实际返回计算属性值的函数 console.log ("status getter called") if (person.age < 18) { return 'minor'; } else { return 'adult'; } }, function (newValue) { // 当计算属性值更新时调用的函数 console.log ("status has changed to", newValue) } }); // 我们可以像使用一般的属性一样使用计算属性 console.log ("The person's status is: ", person.status);
Let's write a simple defineComputed function that supports calling compute methods, but there is no need for it to support updateCallback at the moment.
function defineComputed (obj, key, computeFunc, updateCallback) { Object.defineProperty (obj, key, { get: function () { // 执行计算函数并且返回值 return computeFunc (); }, set: function () { // 什么也不做,不需要设定计算属性的值 } }) }
There are two problems with this function:
The calculation function computeFunc () is executed every time the calculated property is accessed
It does not know when to update (i.e. when we Update an attribute in a data, and the data attribute will also be updated in the calculated attribute)
// 我希望最终函数执行后是这个效果:每当person.age更新值的时候,person.status也同步更新 person.age = 17; // console: status 的值为 minor person.age = 22; // console: status 的值为 adult
Add a dependency
Let’s add A global variable Dep:
var Dep = { target: null };
This is a dependency, and then we use a Sao operation to update the defineComputed function:
function defineComputed (obj, key, computeFunc, updateCallback) { var onDependencyUpdated = function () { // TODO } Object.defineProperty (obj, key, { get: function () { // 将onDependencyUpdated 这个函数传给Dep.target Dep.target = onDependencyUpdated; var value = computeFunc (); Dep.target = null; }, set: function () { // 什么也不做,不需要设定计算属性的值 } }) }
Now let us return to the response attributes set before:
function defineReactive (obj, key, val) { // 所有的计算属性都依赖这个数组 var deps = []; Object.defineProperty (obj, key, { get: function () { // 检查是否调用了计算属性,如果调用了,Department.target将等于一个onDependencyUpdated函数 if (Dep.target) { // 把onDependencyUpdated函数push到deos中 deps.push (target); } return val; }, set: function (newValue) { val = newValue; // 通知所有的计算属性,告诉它们有个响应属性更新了 deps.forEach ((changeFunction) => { changeFunction (); }); } }) };
We can update the onDependencyUpdated function after the function defined by the calculated property triggers the update callback.
var onDependencyUpdated = function () { // 再次计算 计算属性的值 var value = computeFunc (); updateCallback (value); }
Integrate them together:
Let us revisit our calculated attribute person.status:
person.age = 22; defineComputed ( person, 'status', function () { if (person.age > 18) { return 'adult'; } }, function (newValue) { console.log ("status has changed to", newValue) } }); console.log ("Status is ", person.status);
I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!
Recommended reading:
How to use bootstrap selectpicker drop-down box in actual projects
##Use vue-route beforeEach to make Navigation Guard
The above is the detailed content of How to use Vue.js+computed. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

This article explores effective use of Java's Collections Framework. It emphasizes choosing appropriate collections (List, Set, Map, Queue) based on data structure, performance needs, and thread safety. Optimizing collection usage through efficient

The article explains how to use source maps to debug minified JavaScript by mapping it back to the original code. It discusses enabling source maps, setting breakpoints, and using tools like Chrome DevTools and Webpack.

This tutorial will explain how to create pie, ring, and bubble charts using Chart.js. Previously, we have learned four chart types of Chart.js: line chart and bar chart (tutorial 2), as well as radar chart and polar region chart (tutorial 3). Create pie and ring charts Pie charts and ring charts are ideal for showing the proportions of a whole that is divided into different parts. For example, a pie chart can be used to show the percentage of male lions, female lions and young lions in a safari, or the percentage of votes that different candidates receive in the election. Pie charts are only suitable for comparing single parameters or datasets. It should be noted that the pie chart cannot draw entities with zero value because the angle of the fan in the pie chart depends on the numerical size of the data point. This means any entity with zero proportion

Once you have mastered the entry-level TypeScript tutorial, you should be able to write your own code in an IDE that supports TypeScript and compile it into JavaScript. This tutorial will dive into various data types in TypeScript. JavaScript has seven data types: Null, Undefined, Boolean, Number, String, Symbol (introduced by ES6) and Object. TypeScript defines more types on this basis, and this tutorial will cover all of them in detail. Null data type Like JavaScript, null in TypeScript
