Les projets de mon entreprise précédente utilisaient principalement jQuery et Angular1, puis j'ai appris React. Je ne m'attendais pas à ce que lorsque je suis arrivé dans cette entreprise, j'ai soudainement commencé à faire Vue, mais Vue l'est. ça reste assez facile pour démarrer. Ce qui suit est un résumé de la pile technologique vue, le tout provenant du site officiel. Il s'agit principalement de ma propre collection de points de connaissance de la pile technologique vue. Il est donc recommandé de lire mon article précédent Vuejs. pile technologique de la CLI à l'empaquetage et à la mise en œuvre en ligne
Il existe deux méthodes de construction, la construction indépendante et la construction d'exécution. La différence entre eux est que le premier inclut un compilateur de modèles et le second non.
La responsabilité du compilateur de modèles est de compiler les chaînes de modèles en fonctions de rendu JavaScript pures. Si vous souhaitez utiliser l'option modèle dans un composant, vous avez besoin d'un compilateur.
Veuillez consulter l'organigramme sur le site officiel pour plus de détails. Ce à quoi vous devez faire attention, c'est la différence entre créé et monté signifie que l'instance de machine virtuelle a été créée mais. n'est pas monté, donc certaines opérations DOM doivent être placées dans Mounted . Il n'y a aucune différence selon que la requête asynchrone est créée ou montée. Si vous connaissez la différence, veuillez commenter.
Les expressions dans les modèles ne doivent pas contenir trop de logique. Pour toute logique complexe, les attributs calculés doivent être utilisés
attributs et méthodes calculés La différence est que les propriétés calculées sont mis en cache en fonction de leurs dépendances.
attribut calculé et attribut calculé, généralement une meilleure idée est d'utiliser l'attribut calculé au lieu du rappel de surveillance impératif. Bien que les propriétés calculées soient plus appropriées dans la plupart des cas, un observateur personnalisé est parfois nécessaire. Ceci est utile lorsque vous souhaitez effectuer des opérations asynchrones ou coûteuses en réponse à des modifications de données.
La méthode de mutation du tableau (méthode de mutation, qui changera le tableau d'origine appelé par ces méthodes) déclenchera une mise à jour de la vue, il y en a les sept suivantes :
push() pop() shift() unshift() splice() sort() reverse()
Lorsque vous utilisez la méthode de non-mutation, vous pouvez remplacer l'ancien tableau par le nouveau tableau, ou utiliser la méthode Vue.set.
Vous pouvez remplacer l'ancien objet par le nouvel objet, ou utiliser la méthode Vue.set
Vue.set(vm.someObject, 'foo', 'bar')
this.someObject = Object.assign({}, this.someObject, { a:1, b:2 })Vue .js pour v-on fournit des modificateurs d'événement et des modificateurs de clé
Vous pouvez utiliser la directive v-model pour créer une liaison de données bidirectionnelle sur les éléments de contrôle de formulaire. Les modificateurs courants incluent .lazy, .number et .trim.
Vous pouvez également utiliser des composants de saisie de formulaire avec des événements personnalisés.
L'API du composant Vue est composée de trois parties : les accessoires, les événements et les slots :
Les accessoires permettent à l'environnement externe de transmettre des données à le composant
Les événements permettent aux composants de déclencher des effets secondaires de l'environnement externe
Les emplacements permettent aux environnements externes de combiner du contenu supplémentaire dans le composant.
1) L'attribut data du composant doit être une fonction
2) Composant parent-enfant
Dans Vue.js, la relation entre Les composants parent-enfant peuvent être résumés comme des accessoires vers le bas, des événements vers le haut. Le composant parent transmet les données au composant enfant via des accessoires, et le composant enfant envoie des messages au composant parent via des événements.
prop est une liaison unidirectionnelle : lorsque les propriétés du composant parent changent, elles seront transmises au composant enfant, mais pas l'inverse. Cela permet d'éviter que les composants enfants ne modifient par inadvertance l'état du composant parent, ce qui rendrait le flux de données de l'application difficile à comprendre.
De plus, chaque fois que le composant parent est mis à jour, tous les accessoires du composant enfant seront mis à jour avec les dernières valeurs. Cela signifie que vous ne devez pas modifier les accessoires à l'intérieur des composants enfants. Si vous faites cela, Vue donnera un avertissement dans la console.
Pourquoi avons-nous envie de modifier les données dans prop ? Il y a généralement deux raisons :
1.prop est transmis comme valeur initiale et le sous-composant souhaite l'utiliser comme données locales
2.prop est transmis comme valeur initiale ; . Traité par sous-composants dans d'autres sorties de données.
Pour ces deux raisons, la bonne réponse est :
1 Définissez une variable locale et initialisez-la avec la valeur de prop :
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}2. propriété calculée qui traite la valeur de prop et la renvoie.
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}Notez que les objets et les tableaux sont des types référence en JavaScript, pointant vers le même espace mémoire. Si prop est un objet ou un tableau, sa modification à l'intérieur du composant enfant affectera l'état du. composant parent.
3) Composantes non-parent-enfant
Parfois deux composantes doivent également communiquer (relation non-parent-enfant). Dans des scénarios simples, une instance Vue vide peut être utilisée comme bus d'événements central. Dans les cas complexes, nous devrions envisager d’utiliser des modèles de gestion étatique spécialisés.
4) Modificateur .sync
Dans certains cas, nous pouvons avoir besoin d'effectuer une "liaison bidirectionnelle" sur un accessoire.
.sync a été supprimé dans la version 2.0 et Vue2.3.0+ l'a ajouté, mais cette fois, il n'existe qu'en tant que sucre syntaxique au moment de la compilation, et il sera étendu en une propriété de composant parent automatiquement mise à jour. -sur l'auditeur. Le code suivant
<comp :foo.sync="bar"></comp>
sera étendu à :
<comp :foo="bar" @update:foo="val => bar = val"></comp>
Lorsque le sous-composant doit mettre à jour la valeur de foo, il doit déclencher explicitement un événement de mise à jour :
this.$emit('update:foo', newValue)5) Utiliser des emplacements pour la distribution de contenu
Scope slot : recevez les objets prop transmis par les composants enfants. Un cas d'utilisation plus représentatif des emplacements de portée est celui des composants de liste, permettant aux composants de personnaliser la façon dont chaque élément de la liste doit être rendu
6) Composants dynamiques, attributs et directives keep-alive
7 )Indice des sous-composants
尽管有props和events，但是有时仍然需要JavaScript中直接访问子组件。为此可以使用ref为子组件指定一个索引ID。
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。包括以下工具：
在CSS过渡和动画中自动应用class
可以配合使用第三方CSS动画库，如Animate.css
在过渡钩子函数中使用JavaScript直接操作DOM
可以配合使用第三方JavaScript动画库，如Velocity.js
1）单元素/组件的过渡
Vue提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加过渡
条件渲染（使用v-if）
条件展示（使用v-show）
动态组件
组件根节点
2）多个元素的过渡
对于原生标签可以使用 v-if/v-else
3）多个组件的过渡
多个组件的过渡我们可以使用动态组件。
4）列表过渡
和Angular的指令类似，主要操作DOM，下面是一个滚动加载的指令，holder暂时没想到什么更好的处理方法：
let scrollCallback = function (callback) {
let windowH = window.innerHeight
let getDocumentHeight = function () {
var body = document.body
var html = document.documentElement
return Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
)
}
let scrollH = document.documentElement.scrollTop || document.body.scrollTop
if (windowH + scrollH >= getDocumentHeight() - (this.holder || 20)) {
callback()
}
}
let callBackWarpped
export default {
bind (el, binding, vnode) {
let holder
if (vnode.data && vnode.data.attrs && vnode.data.attrs['scroll-placeholder']) {
holder = parseInt(vnode.data.attrs['scroll-placeholder'])
} else {
holder = 20
}
callBackWarpped = scrollCallback.bind({el, holder}, binding.value)
window.addEventListener('scroll', callBackWarpped, false)
},
unbind: function () {
window.removeEventListener('scroll', callBackWarpped, false)
}
}混合是一种灵活的分布式复用Vue组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
1）创建插件
Vue.js的插件应当有一个公开方法install。这个方法的第一个参数是Vue构造器 , 第二个参数是一个可选的选项对象。
2）使用插件
通过全局方法Vue.use()使用插件:
// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)
也可以传入一个选项对象:
Vue.use(MyPlugin, { someOption: true })1）router-link声明式导航
<router-link to="/foo">Go to Foo</router-link>
router-link对应的路由匹配成功，将自动设置class属性值.router-link-active。
2）编程式导航
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})vue-router默认hash模式，也可以设置为路由的history模式。
vue-router提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。
一个路由匹配到的所有路由记录会暴露为$route对象（还有在导航钩子中的route对象）的$route.matched数组。因此，我们需要遍历$route.matched来检查路由记录中的meta字段。
router-view是基本的动态组件，所以我们可以用transition组件给它添加一些过渡效果。
有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：
导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。
导航完成之前获取：导航完成前，在路由的enter钩子中获取数据，在数据获取成功后执行导航。
注意: 这个功能只在HTML5 history模式下可用。
当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合Vue的异步组件和Webpack的code splitting功能,轻松实现路由组件的懒加载。
const Foo = resolve => require(['./Foo.vue'], resolve)
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})可以设置tag、append、active-class、exact等属性
有时候我们要让 "激活时的CSS类名" 应用在外层元素，而不是a标签本身，那么可以用router-link渲染外层元素，包裹着内层的原生a标签：
<router-link tag="li" to="/foo"> <a>/foo</a> </router-link>
在这种情况下，a将作为真实的链接（它会获得正确的 href 的），而"激活时的CSS类名"则设置到外层的li。
routes、mode、base、linkActiveClass、scrollBehavior
1）注入的属性
通过在Vue根实例的router配置传入router实例，下面两个属性成员会被注入到每个子组件。
$router：router实例
$route：当前激活的路由信息对象。这个属性是只读的，里面的属性是immutable（不可变）的，不过你可以watch（监测变化）它。
2）允许的额外配置：beforeRouteEnter、beforeRouteLeave
1)单一状态树
Vuex使用单一状态树--是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
2）在Vue组件中获得Vuex状态
最好在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。而不是在每个需要使用state的组件中需要频繁地导入。
3）mapState辅助函数
当一个组件需要获取多个状态时候，可以使用mapState辅助函数帮助我们生成计算属性，这样可以简化代码书写。mapState函数会返回一个对象，然后可以使用对象展开运算符将它与局部计算属性混合使用。
4）不要滥用vuex
使用Vuex并不意味着你需要将所有的状态放入Vuex。虽然将所有的状态放到Vuex会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
getters用来从store中的state中派生出一些状态，例如对列表进行过滤并计数：
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}getters可以认为是store的计算属性。和state类似，有mapGetters辅助函数。
更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutations非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数
1）提交载荷（Payload）
你可以向store.commit传入额外的参数，即mutation的载荷（payload）：
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
store.commit('increment', 10)2）Mutations需遵守Vue的响应规则
3）使用常量替代Mutation事件类型
4）mutation必须是同步函数
5）在组件中提交Mutations
你可以在组件中使用this.$store.commit('xxx')提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用（需要在根节点注入store）。
actions类似于mutation，不同在于：
actions提交的是mutation，而不是直接变更状态。
actions可以包含任意异步操作。
1）在组件中分发Action
你在组件中使用this.$store.dispatch('xxx')分发action，或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用（需要先在根节点注入store）
2）组合Actions
Action通常是异步的，那么如何知道action什么时候结束呢？更重要的是，我们如何才能组合多个action，以处理更加复杂的异步流程？
首先，你需要明白store.dispatch可以处理被触发的action的回调函数返回的Promise，并且store.dispatch仍旧返回Promise。
使用async/await会更加简单：
// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store对象就有可能变得相当臃肿。
为了解决以上问题，Vuex允许我们将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态Vuex的store接受plugins选项，这个选项暴露出每次mutation的钩子。Vuex插件就是一个函数，它接收store作为唯一参数。
开启严格模式，仅需在创建store的时候传入strict:true
在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更--请确保在发布环境下关闭严格模式，以避免性能损失。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
