ARTS - Week Five

发布于: 2020 年 06 月 19 日
ARTS - Week Five

Algorithm

Problem

42. Trapping Rain Water

Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it is able to trap after raining.

Solution

/**
* @param {number[]} height
* @return {number}
*/
var trap = function(height) {
if (height == null || height.length < 3) return 0
let left = 0 // 左指针
let right = height.length - 1 // 右指针
let max_left = 0 // 记录左边界
let max_right = height.length - 1 // 记录右边界
let rain = 0 // 雨水量
while(left < right) {
// 移动高度低的指针
if (height[left] < height[right]) {
// 更新边界
if (height[left] > height[max_left]) {
max_left = left
}
rain += (height[max_left] - height[left])
left++
} else {
if (height[right] > height[max_right]) {
max_right = right
}
rain += (height[max_right] - height[right])
right--
}
}
return rain
};

Review

Artical

Vue 2 props and emit - parent to child

Link

https://medium.com/@sky790312/about-vue-2-ops-af3b5bb59829

Review

The correct way to use props and $emit

OK, so what’s correct way ? we want component reusable, it should pure. Following is the flow what vue design.

  1. Parent has data to control, pass data to child component by props.

  2. If child component need to deal with props data, assign props data value to itself’s data when component mounted.

  3. After handle method, parent open a interface to child. Child $emit back new value to parent.

(every component has it scope and data.)

Tips

Dynamic directive arguments

One of the coolest features of Vue 2.6 is the possibility to pass down directive arguments to a component dynamically. Imagine you have a Button-Component and want to listen to a Click-Event in some cases but to a DoubleClick-Event in other cases. That's where those directives come in handy:

<template>
...
<aButton @[someEvent]="handleSomeEvent()"/>
...
</template>
<script>
...
data(){
return{
...
someEvent: someCondition ? "click" : "dblclick"
}
},
methods:{
handleSomeEvent(){
// handle some event
}
}
...
</script>

Share

Artical

7 Simple VueJS Tips You Can Use to Become a Better Developer

Link

https://medium.com/swlh/7-simple-vuejs-tips-you-can-use-to-become-a-better-developer-dd423db07881

Summary

How to write optimized JavaScript

1. Use one component in multiple routes

<router-view :key='$route.path' />

2. The $on(‘hook:’) can help simplify your code

mounted () {
window.addEventListener('resize', this.resizeHandler);
this.$on("hook:beforeDestroy", () => {
window.removeEventListener('resize', this.resizeHandler);
})
}

3. $on can also listen to a child component’s lifecycle hooks

<child-comp @hook:mounted="someFunction" />

4. Use immediate: true to trigger watchers on initialization

watch: {
title: {
immediate: true,
handler(newTitle, oldTitle) {
console.log("Title changed from " + oldTitle + " to " + newTitle)
}
}
}

5. You should always validate your props…please.

props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}

6. Passing all props to a child component is easy

<child-comp v-bind="$props"></child-comp>

7. You HAVE TO understand all the component options

when would I use a watcher?

  • Observing a value until it reaches a specific value

  • Making an asynchronous API call when a value changes

  • You don’t need to combine existing data into a new property

VueJS Lifecycle Hooks

  • Using the beforeCreate hook is useful when you need some sort of logic/API call that does not need to be assigned to data.

  • Mounting Hooks – Accessing the DOM

  • Update Hooks – Reactivity in the VueJS Lifecycle

  • Destruction Hooks – Cleaning Things Up

How to Manage VueJS Mixins

// mixin.js
export default {
data () {
msg: ‘Hello World’
},
created: function () {
console.log(‘Printing from the Mixin’)
},
methods: {
displayMessage: function () {
console.log(‘Now printing from a mixin function’)
}
}
}
// main.js
import mixin from './mixin.js'
new Vue({
mixins: [mixin],
created: function () {
console.log(this.$data)
this.displayMessage()
}
})
// EXPECTED OUTPUT
// => "Printing from the Mixin"
// => {msg: ‘Hello World’}
// => "Now printing from a mixin function"

用户头像

shepherd

关注

还未添加个人签名 2020.05.13 加入

还未添加个人简介

评论

发布
暂无评论
ARTS - Week Five