ARTS - Week Five

关注
发布于: 2020 年 06 月 19 日
AlgorithmProblem42. 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
};
ReviewArticalVue 2 props and emit - parent to child
Linkhttps://medium.com/@sky790312/about-vue-2-ops-af3b5bb59829
ReviewThe 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.
Parent has data to control, pass data to child component by props.
If child component need to deal with props data, assign props data value to itself’s data when component mounted.
After handle method, parent open a interface to child. Child $emit back new value to parent.
(every component has it scope and data.)
TipsDynamic 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>
﻿
ShareArtical7 Simple VueJS Tips You Can Use to Become a Better Developer
Linkhttps://medium.com/swlh/7-simple-vuejs-tips-you-can-use-to-become-a-better-developer-dd423db07881
SummaryHow 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"
﻿
发布于: 2020 年 06 月 19 日阅读数: 58
shepherd

关注
还未添加个人签名 2020.05.13 加入
还未添加个人简介
发布
暂无评论
创作场景

ARTS - Week Five

Algorithm

Problem

Solution

Review

Artical

Link

Review

Tips

Share

Artical

Link

Summary

shepherd

评论
