Vue 2 Internal Features from the Ground Up

Challenge 1: Getters and Setters

Evan You

Evan You

Creator of Vue.js
Vue 2 Internal Features from the Ground Up

Check out a free preview of the full Vue 2 Internal Features from the Ground Up course

The "Challenge 1: Getters and Setters" Lesson is part of the full, Vue 2 Internal Features from the Ground Up course featured in this preview video. Here's what you'd learn in this lesson:

Evan reviews Object.defineProperty() and its get and set functions. In this challenge, students implement observe() and autorun(), which triggers re-computation when object is mutated.


Transcript from the "Challenge 1: Getters and Setters" Lesson

>> Evan You: We're gonna look into how to actually do this ourselves, and we're gonna actually implement a mini data observer that's similar to how it works in view. So I assume everyone's got the zipped repository, so let's extract it and go into the repository. So we'll see these files, inside reactivity look at

So each exercise comes with a markdown file that describes the requirement and an associated html file, which asks you to implement the requirements. So the first exercise is understanding how to use Object.defineProperty. If you've never used this API before, look it up on MDN, and check out how the API works.

Essentially how Object.defineProperty works, I think I'm going to just quickly walk through it, because reading through the docs may take some time. It's just a global API that looks like this, Property, all right? And it takes the source object, obviously, as the first argument, and the second argument is the key of the property that you want to manipulate.

So this key can be in the existing key, or in an unexisting key. So if it doesn't exist it'll create it for you, if it exists it depends on whether that property is so-called configurable. If it's configurable, we can override it. So we'll just use a random key, and then the third argument should be an object descriptor.

So this descriptor can take some properties like, enumerable.
>> Evan You: By default all of these properties are false. So if a property is declared as enumerable false, then when you use, say, for far keying object to iterate over it, it will not show up, because it's not enumerable. Similarly it will not show up in object keys, and configurable as we just talked about, prevents it from being redefined again.

So once you've define something with configurable false, it can never be changed again, so be careful with that. And then we have writable, so if a property is not writable, you can still assign to it, but it will have no effect, and it will fail silently. So it's also something that you should be careful about.

But finally the most important thing is the get and set functions. So we can define functions get and set,
>> Evan You: And this will overwrite the default behavior, so get overwrites the .access, and set overwrites the assignment. So you can return arbitrary values from the get function. So if you [LAUGH] return bar, so you will have a property that always, always, always return bar no matter what, you cannot change it [LAUGH] anymore.

What you can do to change it, though, is, so the set obviously takes the new value as the argument, and the problem's how do you save this value somewhere, right? So obviously, you have to save it somewhere else, so the realValue, you need to put it in another variable.

So you can then return realValue,
>> Evan You: And I'll let you fill in the rest, so let's open the first exercise.
>> Evan You: So the exercise requires you to implement a convert object. [COUGH] And the requirement is, it should walk through all the properties inside the given object, and convert each of them into a pair of getters and setters.

And the converting object should retain the original behavior, so if you assign it a new value and then you access it again, it should return the new value. It should just act just like the original object, but at the same time, whenever you access a property, you should console.log that access.

And whenever you set a property to a new value, it should also be logged. Essentially you need to create an object that automatically logs all the access and assignments that's happening on it. Is that clear?
>> Evan You: So, if you have Node.js installed on your machine, inside the repository you can run NPM Install to install some testing tools.

Some of these exercises include automated test suites that you can run with NPM Test, to assert whether your current implementation is correct. Make sure to pass these arguments, so that you limit the test to the current exercise.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now