Кратко опишите API, которые обычно используются в Vue и должны быть опрошены.

Vue.js

написать впереди

VueГлобальныйapiи примерыapiМногие-многие забудутся по углам, и их трудно вспомнить, не прочитав документацию. но этиapiЭто также необходимо для ежедневного развития и часто требуется во время собеседований. Итак, я помещаю это здесь, чтобы подвести итоги, на самом деле, понять этиapiМожет расширить много очков знаний. Конечно, здесь не будет слишком много очков знаний по расширению дизайна.

Обратите внимание, что многие вещи на самом деле есть в документе, но чтение документа на самом деле очень скучно, особенно для новичков, и многие вещи в документе относительно неясны и отрывочны.

API, связанный с данными

VueЗачем тебе эти дваapiШерстяная ткань? Это в основном связано сVueсвязан с принципом отзывчивости. при созданииVueВ данном случаеVueбудуmodelДанные слоя обрабатываются оперативно, и данные контролируются.set&get, чтобы представление можно было обновить в будущем. Но часто бывают случаи, когда нам может понадобиться добавить или удалить некоторые свойства в какой-то момент в будущем, и в это время мы ожидаем, что представление также изменится. Если мы просто назначаем/удаляем свойство экземпляра, то, поскольку свойство не подверглось ответной обработке при инициализации экземпляра, очевидно, чтоVueАвтоматическое обновление представления нам не поможет, поэтому для реализации этого сценария он тесно предоставляет пользователю эти два API, а не только статические методыVue.set & Vue.delete, каждый экземпляр Vue также имеет соответствующий метод экземпляраvm.$set & vm.$delete

  • Vue.set Добавьте свойство в реактивный объект и убедитесь, что это новое свойство также является реактивным и запускает обновление представления.
  • Vue.delete Удалить свойство объекта. Если объект является реактивным, убедитесь, что удаление запускает обновление представления.
<div id="app">
  <p>{{message}}</p>
  <p>姓名：{{info.name}}</p>
  <p v-show="info.age">年龄：{{info.age}}</p>
  <p v-if="info.sex">性别：{{info.sex}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      message: "hello",
      info: {
        name: "tom",
        sex: "男",
      },
    },
  });
  setTimeout(() => {
    Vue.set(vm.info, "age", 12);
    Vue.delete(vm.info, "sex");
  }, 3000);
</script>

АПИ, связанные с событием

существуетVueРаздел руководства по документации может упоминать только$emitтак же какv-onЭти вещи связаны с событиями. Но много раз, например, нам нужно сделать кросс-компонентную коммуникацию, я помню, когда я впервые начал контактироватьVueКогда сообщество было наводнено большим количествомbusВ это время механизму шины часто требуется реализовать подписку на сообщения и публикацию. ФактическиVueТакие возможности были предоставлены, в основном, следующим образомapi:

Обратите внимание, что все эти API находятся в экземпляре Vue.

  • $на привязать событие
  • $ излучать триггерное событие
  • $один раз Привязать только один раз, удалить при срабатывании
  • $ off Отвязать события, обратите внимание, что параметры этого метода немного интересны
    • Если параметр не указан, удалите все прослушиватели событий;
    • Если предоставлено только событие, удалите всех прослушивателей для события;
    • Если предоставлены и событие, и обратный вызов, удаляется только прослушиватель для этого обратного вызова.
<script>

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

  vm1.$on('hello-world',function(msg){
    console.log(msg);
  })
  vm1.$emit('hello-world','hello china',)


  // 测试$once
  const vm2 = new Vue;

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

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


  // 测试$off
  const vm3 = new Vue;

  vm3.$on('off1',function(){
    console.log(123);
  })
  vm3.$on('off2',function(){
    console.log(456);
  })
  // 不传参数
  vm3.$off()
  vm3.$emit('off1')
  vm3.$emit('off2')


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

  vm3.$on('off4',function(){
    console.log(101112);
  })
  // 只传一个事件名称
  vm3.$off('off3')
  vm3.$emit('off3')
  vm3.$emit('off4')

  // 传事件名称 和 回调函数

  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>

Студенты, знакомые с jQuery, должны быть удивлены~~

ref & nextTick

Оба ониVueВ интервью есть и более общие вещи, особенноnextTickпродлитVueизАсинхронная очередь обновлений;а такжеrefЕще одна форма компонентной связи. Так что здесь очень нужно пояснить

Проще говоря:

  • refэто свойство, которое может действовать на роднойDOM,В настоящее времяrefуказывает наDOMЭлемент; в данном случае также может воздействовать на пользовательские компонентыrefУказывает на экземпляр компонента. Конечно, последнийrefбудет приписан экземпляру его родительского компонента$refsхарактеристики.

  • nextTickЧто это такое? По сути, он поместит callback-функцию в массив, а затем в виде даунгрейда (promise используется для поддержки promise, иначе используйте мета-таймер), когда данные изменяются и представление обновляется асинхронно, callback-функция будет быть казненным.

Конкретные примеры следующие:

<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/vue@2.6.12"></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>

наконец

Суммируя эти общиеVueдолженapi, я надеюсь, что это может помочь вам, кто ищет работу~~, и я также надеюсь добиться прогресса вместе, и я просмотрю документы, если мне нечего делать. На самом деле, в документе скрыто очень много знаний.

  • Ссылаться на

vue.js

vue api

nextTick

Категории