Writing in the front

There are many Vue global apis and instance apis, many of which are forgotten in the corner and hard to remember if you haven’t read the documentation. However, these apis are a daily development requirement and are often required during interviews. So just to sum it up here, there’s a lot you can learn from understanding these apis. Of course, there will not be too much design extension knowledge.

Note that a lot of things are actually in the documentation, but reading the documentation is actually boring, especially for beginners, and many things in the documentation are obscure and awkward

Data related API

Why does Vue need these two apis? This is mainly related to Vue’s responsivity principle. When a Vue instance is created, the Vue responds to the data in the Model layer, listening for set&GET of the data to update the view in the future. But sometimes we may need to add or remove properties at some point in the future when we expect the view to change. If we simply assign/delete an instance property, then since the property is not reactive when the instance is initialized, obviously Vue will not automatically update the view for us, so to implement this scenario, Vue. Set & Vue. Delete; Vue. $set & Vue

  • Vue.set adds a property to the reactive object and ensures that the new property is also reactive and triggers view updates.
  • Vue.delete Deletes the property of the object. If the object is reactive, make sure the deletion triggers an update to the view.
<div id="app">
  <p>{{message}}</p>
  <p>Name: {{info. Name}}</p>
  <p v-show="info.age">Age: {{info. Age}}</p>
  <p v-if="info.sex">Gender: {{info. Sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  const vm = new Vue({
    el: "#app".data: {
      message: "hello".info: {
        name: "tom".sex: "Male",}}});setTimeout(() = > {
    Vue.set(vm.info, "age".12);
    Vue.delete(vm.info, "sex");
  }, 3000);
</script>
Copy the code

Event-related API

The tutorial section of the Vue documentation will probably only mention $emit and V-ON events. But in many cases, for example, cross-component communication is needed. I remember when I first got into Vue, the community was full of bus mechanisms and often had to implement message subscription and publishing itself. In fact, Vue already provides this capability, mainly through the following apis:

Note that these apis are on Vue instances

  • $ON binding event
  • $emit triggers the event
  • $once Is bound only once and is removed after being triggered
  • $off Unbind event, note that the arguments to this method are somewhat interesting
    • If no arguments are provided, all event listeners are removed;
    • If only events are provided, remove all listeners for that event;
    • If both an event and a callback are provided, only the listener for that callback is removed.
<script>

  // Test $on & $emit
  const vm1 = new Vue({})

  vm1.$on('hello-world'.function(msg){
    console.log(msg);
  })
  vm1.$emit('hello-world'.'hello china'.)/ / $once test
  const vm2 = new Vue;

  vm2.$once('test-once'.function(){
    console.log('abc');
  })

  vm2.$emit('test-once')
  vm2.$emit('test-once')


  / / test $off
  const vm3 = new Vue;

  vm3.$on('off1'.function(){
    console.log(123);
  })
  vm3.$on('off2'.function(){
    console.log(456);
  })
  // Do not pass parameters
  vm3.$off()
  vm3.$emit('off1')
  vm3.$emit('off2')


  vm3.$on('off3'.function(){
    console.log(789);
  })

  vm3.$on('off4'.function(){
    console.log(101112);
  })
  // Pass only one event name
  vm3.$off('off3')
  vm3.$emit('off3')
  vm3.$emit('off4')

  // Pass the event name and the callback function

  function off5(){
    console.log('off5');
  }
  function off6(){
    console.log('off6');
  }

  vm3.$on('off5',off5)
  vm3.$on('off5',off6)
  vm3.$off('off5',off6)
  vm3.$emit('off5')


</script>
Copy the code

Those familiar with jQuery should be surprised ~ ~

ref & nextTick

Both of these are common interview questions in Vue. In particular, nextTick extends Vue’s asynchronous update queue. Ref is a form of component communication. So it’s really important to say something here

Simple and popular point:

  • Ref is an attribute that applies to the native DOM, where ref refers to the DOM element; It can also apply to custom components, in which case ref points to the component instance. Of course, the ref ends up on the parent component instance’s $refs property.

  • What about nextTick? Instead, it puts the callback function into an array and, via demotion (promise for promise, meta timer otherwise), executes when the data changes and the view is asynchronously updated.

Specific examples are as follows:

<div id="app">
  <p ref="p1">hello vue</p>
  <v-message ref="message"></v-message>
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
  <button @click="addList">addList</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  Vue.component("v-message", {
    template: `<div>this is message comopnents</div>`.methods: {
      say() {
        console.log("hello"); ,}}});const vm = new Vue({
    el: "#app".data: {
      list: [1.2.3.4.5.6],},methods: {
      addList() {
        this.list.push(Math.random());

        console.log(document.getElementsByTagName("li").length);
        this.$nextTick(function() {
          console.log(document.getElementsByTagName("li").length); }); ,}}});console.log(vm.$refs.p1.innerHTML);
  console.log(vm.$refs.message);
  vm.$refs.message.say();
</script>
Copy the code

The last

By summarizing these frequently used Vue essential API, I hope to help you looking for a job ~ ~, in addition, I also hope to progress together, have no time to read more documents. There are many, many things hidden in the document.

  • reference

vue.js

vue api

nextTick