Austin Story

Ruby, Rails and Javascript Blog

What are vue computed properties

By Leave a Comment

At their basis they allow you to create something that acts as a normal data property but is a function that is chached which does not change until they thing it is derived form changes.

[code]
<script>
export default {
data() { return { a: 4} },
computed: { b() { return this.a + 1 } }
}
</script>
[/code]

So what this does
1. Creates a b
2. Sets its value to a + 1 initially (5)
3. Sets up a watcher so that when a changes, it will re cache its value

It is accessed via this.b

This is done in a few areas in the cost.

Initially it is in state.js in initState where it.
1. creates a listed of _computedWatchers
2. For each computed propert
a. define a getter for the computed property
b. create a lazy Watcher for the property, so that the vm will rerender if it is updated
c. (opt) create a getter for the computed property

Javascript Var Definitions Gotcha

By Leave a Comment

This is one of the most common gotchas in Javascript.

What does this code do inside of a function?

‘var a = b = 0;’

Since javascript is right associative for assignments, at first glance you might expect it to create and set the variables a and b to 0. But there is a subtle gotcha hidden here. It actually does this

var a; //compile step initializes memory for a

b = 0; //we are in a scope, since b is not initialized in this scope (compile step misses it), javascript will go up the scope chain, assuming no parent scopes have b variable, the global scope will initialize var b for us and send it back.
a = b;

So more englishy, a is functionally scoped to the local function because it has the var in front of it. b is defined implicitly so it is put on the global scope.

Here is an example that demonstrates this further

[code]
function foo() {
var a = b = ‘assign in foo’;
function bar() {
var c = d = ‘assign in bar nested in foo’;
c; // ‘assign in bar nested in foo’
d; // ‘assign in bar nested in foo’
}
bar();
a; // ‘assign in foo’
b; // ‘assign in foo’
c; // ReferenceError, c only available in bar function
d; // ReferenceError, d available in bar and globally
}

foo();

a; // ReferenceError, because a is functionally scoped to the foo function
b; // ‘assign in foo’
c; // ReferenceError, because c is functionally scoped to the bar function
d; // ‘assign in bar nested in foo’
[/code]

After the invocation of foo in the code above, both b and d are now global variable.

What is a thunk in javascript?

By 2 Comments

A thunks is a function that contains all of the context (state, functions, etc) it will need in order to carry out some sort of logic in the future.

Another way to say that, they are a function closure that begins with all of the arguments it will need in order to execute. You just don’t want to execute it now, it will be sometime in the future.

Synchronous Example

[code]
const add = (x,y) => x + y;

const thunk = () => add(1,2);

thunk() // 3
[/code]

 

Asyncrhonous

[code]
const addAsync = (x,y,callback) => {
setTimeout(function() { callback(x + y) }
}

var thunk = (callback) => addAsync(10,15,callback);

thunk( function() {
sum; // 25
}
[/code]