仕上げvuejs仕上げVUE顔の質問の基礎

プライマリリファレンス

V-かの違いで1.vショー

V-showがある隠されたCSS、V-場合は直接破壊と創造、それはV-ショーとの頻繁な切り替えに適しています

2.プロパティと時計の間の差を計算します

プロパティが変更がダイナミックの内容を返した値に依存しているモニターを自動的に計算され、リスニングは、リスナーの値の変化のプロセスで、コールバックをトリガし、それについて何かを行うことができます。

だから、違いは用法から来て、ちょうど計算属性を使用し、その後、動的な値を必要とし、変更は、時計と、ビジネスロジックの実装の価値を知っている必要がある、または抗ものの可能と混合して、彼らは正しい使い方ではありません。

差がプラスになることを言うために、

オブジェクトが計算されている場合、それはどのようなオプションがありますか?

計算や方法の違いは何ですか?

計算されたデータは、他のコンポーネントに頼ることができるかどうか?

時計は、それがどのようなオプションがあり、オブジェクトのですか?

取得および設定するには、2つのオプションがあります。

メソッドパラメータを受け入れることができる方法であり、計算、計算することができない方法ではなく、キャッシュすることができます。

これは、他の計算された、あるいは他のデータ要素とは独立して計算することができます。

時計の設定

ハンドラ

深度の深いかどうか

すぐに実行するかどうかをimmeditate

概要

いくつかのデータは、時間変化に伴ういくつかの追加データが必要とされている場合、我々は計算された使用をお勧めします。

ウォッチャーを推奨する場合、ビジネスロジックの一部または非同期操作を実行する際に、変更されたデータに共通の応答があったとき

3.イベントの修飾子

ネイティブのクリックイベントをバインドし、プラスネイティブ、

その他のイベント修飾子

(デフォルトのイベントを防ぐために)停止(イベントバブリングを停止)を防ぐ自己(唯一の彼らのトリガー、サブアセンブリがトリガされません)

キーの組み合わせ

それがCTRLトリガー押すだけclick.ctrl.exact

4.双方向の原理は結合します

サブスクリプションモデルによって達成し、データハイジャックモードを公開し、加入者へのデータ変更メッセージが、なぜVueのある対応するコールバックリスナーをトリガするとAPIのコアはObject.defineProperty()によって公表された各属性のセッター/ゲッターを、ハイジャックすることですIE8はサポートされていないの.js 2.xの理由。双方向バインディング、最初のデータの乗っ取りを実現するためには、すべてのプロパティを聞くために使用されるリスナーのオブザーバーを、設定する必要があります。プロパティが変更された場合は、ニーズが更新されるかどうかを確認するために加入者にウォッチャーに伝える必要があります。あなたがリスナーと加入者間の加入者を収集するための特別なメッセージ加入者DEPと、および一元管理を必要とするので、加入者の多くは、スキャンおよび解析のために、各ノード要素の最後のコマンドパーサコンパイルし、必要があるため、関連命令(Vモデル、Vオン ) 加入者Watcheerを初期化し、それぞれの機能を交換するか、テンプレートデータをバインドするために対応

公式サイトは説明した:https://cn.vuejs.org/v2/guide/reactivity.html

個人は、データがどのように流れるか感謝しました

これは、サブアセンブリが小道具で変更することはできません、親コンポーネントのサブアセンブリに渡された通信小道具アセンブリについてです、あなただけそれ以外の場合はエラーになり、親コンポーネントの小道具を変更することができます。サブコンポーネントを変更したい場合は、あなただけの$でカスタムイベントを配布することができ、親コンポーネントによって変更親コンポーネントを受け取った後、放出します。

あなたが親コンポーネントの状態を変更したいシーンのための一般的な、サブアセンブリでは、2つのオプションがあります。

サブアセンブリ支柱のコピーデータが、データは変更が、プロプないことができます。

exportdefault {小道具:{値:文字列}、データ(){リターン{currentValueは:this.value}}}复制代码

値がプロップ変換である場合、プロパティを使用して計算することができます。

exportdefault {小道具:[ 'サイズ']、計算:{normalizedSize:関数(){returnthis.size.trim()toLowerCaseメソッド();。}}}

あなたが使用するプロジェクトに入れる状態管理やショーのVUEの6説明

mapactionsコンポーネントまたはタイプとディスパッチ荷重伝達アクション、コミット処理によりサービス処理を受信した後に実行されるアクション及び負荷伝達変異の種類の方法により、変異は、業務処理を行うが、負荷の種類や状態に応じて受信しますデータを変異、コンポーネント、データ・ウェアハウスはmapgettersによって更新されます。

組立方法mapactions買収を用いた方法では、mapgettersを計算することによって計算された属性を受け取り、このアクションは、反復的に更新され、ポストやすい、主に、よりコンパクトです。次の例では、公式のネットワークを通じて理解を深めていました。

 

 
 

 

 
 

 

 
 

 

 
 

 

 
 

 

 
 

 

 
 

 

 
 

フックのライフサイクルの7説明

作成から破壊へVUEインスタンスプロセスは、ライフサイクルです。創造の初めから、初期化データ、コンパイル済みのテンプレート、DOMをマウントし、再レンダリングの更新をレンダリングし、最終的に一連の処理へとそのライフサイクルの破壊があります。

beforeCreate:観測とデータの初期化イベントが開始されていません

作成した:データの観測業務、プロパティ、メソッド、初期化イベントの完了は、$エルプロパティが表示されませ

beforeMount:フロントは、最初の呼び出しをレンダリングする適切なコールをマウントします。テンプレートのコンパイルの例としては、完成されたデータ内のデータを、テンプレートはHTMLを生成してきたが、HTMLページをマウントするために話しませんでした

新しく作成された$エルが交換:. Vmのエルを搭載し、上記の例を呼び出したために、それをマウントします。例としては、以下の構成を行っている:上記のエルコンパイルされたHTML DOM要素の属性ポイントを置き換えます。完全なテンプレートのHTMLレンダリングHTMLページ。このプロセスは、Ajaxの相互作用。

beforeUpdate:发生在虚拟dom和打补丁之前,可以在该钩子中进一步修改状态,不会触发附加的冲渲染过程。

Updated:由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

8.组件中如何通信

九叔说要讲半小时左右:。。。。

父到子:

传<子组件 :自定义属性=“父数据”>

收:子组件选项props:【‘自定义属性’】

子到父:

父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件

非父子,兄弟组件通讯:

可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递。

组件通讯更详细解释

9.路由守卫是什么,有几种方式

全局守卫,路由独享守卫,组件内部守卫;

全局守卫:

router.beforeRouteEnter(to,from,next){前置守卫,进入}

router.beforeRouterLeave(to,from,next){后置守卫,离开}

to  目标路由  from   当前路由  

next函数:next() == next(true) 运行跳转

   next(false) 不让跳转

   next('字符路径')/next({对象路径}) 重定向

路由独享守卫:没有后置守卫

{

      path: '/foo',

      component: Foo,

      beforeEnter: (to, from, next) => {

        // ...

      }

    }

组件内部守卫:

const Foo = {

  template: `...`,

  beforeRouteEnter (to, from, next) {  前置

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不!能!获取组件实例 `this`

    // 因为当守卫执行前,组件实例还没被创建

  },

 

  beforeRouteLeave (to, from, next) { 后置

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

  }

}

 

10.vue的优化

不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏览器的导航按钮需要自行实现前进、后退

11.什么是插槽或内容分发 ,插槽有几种方式

组件内部保留槽位:

具名槽位:<slot name=槽名

匿名槽位: <slot></..>

调用组件插入内容:  内容 == dom | 组件

<组件名>

<template #槽名> 内容 | <组件名>

<template v-slot:槽名>内容

父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译

12.简述下mvvm和MVC

MVC:

 
 

1.View 传送指令到 Controller

2.Controller 完成业务逻辑后,要求 Model 改变状态

3.Model 将新的数据发送到 View,用户得到反馈

MVP:

 
 

1. 各部分之间的通信,都是双向的。

2. View 与 Model 不发生联系,都通过 Presenter 传递。

3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

MVVM:

 
 

和MVP很像,采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然

13.路由懒加载,异步路由,分片打包

原理: 把组件封装到一个函数内部,路由激活时,调用该函数,函数内部 异步加载目标组件并返回

路由配置router.js:

a)

- import home from "../components/home.vue"

+ const home =()=>import("../components/home.vue");

{path:'/home', component: home }

b)

{path:xxx, component: r => { require(['./login/Login'], r) }}

 

15.vue的数据是响应式的,请问什么时候是非响应式的并如何解决

a:数组数据:

问题1:通过改变长度,利用索引直接设置跟项

解决:Vue.set(数组对象, key, value)                        |                vm|this.$set(数组对象, key, value)

问题2:对数组使用了非变异 (non-mutating method) 方法(返回的了新数组)

解决:对象合并

对象数据变化:

问题:问题:data:{a:1};a 数据是响应式的;vm.b='qq';  b 属性不是响应式的

解决:Vue.set(对象, key, value)                            |                            vm|this.$set(对象, key, value)

总结:数据一开始就应该出现在data里,数组里面永远不要放置简单性数据

16.如何编写一个自定义指令

指令是个函数或者对象,用来操作dom,指令内部的this指向window;

a:全局指令  Vue.directive(指令名称不带v-,回调(el,bingding))

el:dom元素;binding是个对象,含有传入的参数,binding。value

b:局部  定义在选项里面

directives:{

指令名不带v- : 函数(el,binding){}

}

17.如何自定义事件

定义:vm.$on( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )

销毁:vm.$off( '自定义事件名'|['自定义事件名1','自定义事件名2'], 回调(参数) )

触发: vm.$emit(自定义事件名1,参数)

自定义事件名: 使用 kebab-case 的事件名

场景: 在一个组件实例上手动侦听事件时

18.懒加载,按需加载,点击加载,滑动加载

把组件加载封装在一个函数中,路由激活的时候调用这个函数,这个函数在运行的时候去加载这个组件。加载用import或者requireAPI

19.如何更改计算属性并响应式

计算属性的set方法

 
 
 
 
 
 

20.vue的diff算法

突然发现弄懂这个就不是初级了。。。

https://juejin.im/post/5c97002b6fb9a070aa5cf60b



著者:ケア_59bf
リンクします。https://www.jianshu.com/p/875c9069dfc2
出典:ジェーン・ブック
著者によって予約ジェーンブックの著作権、いかなる形で再現され、承認を得るために、作者に連絡して、ソースを明記してください。

おすすめ

転載: www.cnblogs.com/skzxcwebblogs/p/11273101.html