I met the Vue

Vue is a progressive JavaScript framework

What vue.js is: a set of progressive frameworks for building user interfaces. Unlike other frameworks, Vue’s core library only focuses on the view layer. Focusing only on the core library brings to mind a design pattern called MVVM.

Introduce MVVM

MVVM takes the idea of bidirectional binding of data model data as the core, and interacts between View and Model through the viewModel. That is, the change of view data will modify the data source at the same time, and the change of the data source will be reflected in the View.

How to use Vue

Script import usage

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>
  const app = new Vue({
    el: '#app'.data: {
      foo: 'foo'.items: [1.2.3.4],}});</script>
Copy the code

Vue Cli

new Vue({
  router,
  store,
  render: (h) = > h(App),
}).$mount("#app");
Copy the code

Use Vue use confusion

  • Why does it have to be mounted on a DOM node
  • How is new Vuew({}) implemented
  • How is Vue’s lifecycle callback implemented
  • How is the virtual DOM implemented

Mimicking a Vue implementation (a brief exploration)

Mount node #app

<div id="app"></div>
Copy the code

Page rendering is implemented by building Vue instances

<script>
  const app = document.getElementById('app');
  function Vue(options) {}const vm = new Vue({})
  vm.node = document.createElement('h2')
  vm.node.textContent = '111'
  app.appendChild(vm.node)
</script>
Copy the code

Improved object form for creating nodes

Creating nodes as objects may not seem very intuitive, but it is possible to render and create node separation

<script>
  const app = document.getElementById('app');
  function Vue(options) {}const vm = new Vue({})
  // Create a DOM node as a JS object
  vm.vnode = [
    {
      elm: 'h2'.tag: 'h2'.children: [{elm: 'h2'.text: '11'}}]]// Page rendering
  for (const item of vm.vnode) {
    const dom = document.createElement(item.tag)
    if (item.children && item.children.length === 1) {
      dom.textContent = item.children[0].text
    }
    app.appendChild(dom)
  }
</script>
Copy the code

Questions about the Vue lifecycle

  • Is the life cycle blocking
  • How is the life cycle implemented

A simplified version of the simulation lifecycle

<script>
  function Vue(options) {
    this.options = options
    this._events = Object.create(null) 
    eventMixin(this.'create'.this.options['create']())
    callHook(this.'create')
  }

  Vue.prototype.$on = function(event,handler){
    var vm = this;
    vm._events[event] = vm._events[event] || [];
    vm._events[event].push(handler)
    return vm
  }

  Vue.prototype.$emit = function(event){
    var vm = this;
    if (vm._events[event]){
      vm._events[event].forEach((handler) = >{
        handler()
      })
    }
    return vm
  }

  function callHook(vm,name){
    vm.$emit(name);
  }

  function eventMixin(vm,event,fn){
    vm.$on(event,fn)
  }

  const vm = new Vue({
    create(){
      console.log('01'); }})</script>
Copy the code

Vue ecology content

  • Vue Cli: a standard tool for vue. js development
  • Vue Router: Vue. Js Official route manager
  • Vuex: Vuex is a state management mode developed specifically for vue.js applications
  • Element: A vUe-based desktop component library
  • Ant Design of Vue: A Vue implementation of Ant Design
  • VuePress: VUUe-powered static web site generator