vue单文件组件(SFC)规范

站长

2022年09月10日 05:33 · 阅读数 25

图片.vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>。

一个 .vue 文件可以包含多个 <style> 标签,可以在 .vue 文件中添加额外的自定义块来实现项目的特定需求，例如 <docs> 块https://vue-loader.vuejs.org/...。

每个vue文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件。

<view>  
注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
</view>

</template>

export default {  

}

</script>

<style>

</style>https://ask.dcloud.net.cn/art...

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

Node.js 是一个开源和跨平台的 JavaScript 运行时环境,Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。

webpack 是 JavaScript 打包器(module bundler)

I 组件规范组件是视图层的基本组成单元,组件是一个单独且可复用的功能模块的封装,允许我们使用小型、独立和通常可复用的组件构建大型应用。

页面是一种特殊的组件图片

1.1 组件的组成部分每个组件，包括如下几个部分：

以组件名称为标记的开始标签和结束标签组件内容组件属性、组件属性值。所有组件与属性名都是小写，单词之间以连字符-连接。

1.2 公共属性列表属性名类型描述注解id String 组件的唯一标示一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一ref String vue中组件的唯一标示用来给子组件注册引用信息class String 组件的样式类在对应的 css 中定义的样式类style String 组件的内联样式可以动态设置的内联样式hidden Boolean 组件是否隐藏所有组件默认是显示的data-* Any 自定义属性组件上触发的事件时，会发送给事件处理函数@* EventHandler 组件的事件还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。

https://uniapp.dcloud.io/tuto...模板指令

1.3 组件中使用js变量在内容区使用时，使用两个花括号来包裹，如下面的buttonText在属性值中使用时，属性名的前面要加冒号前缀<template> <view>

<button :disabled="buttondisble" >{{buttonText}}</button> </view></template>

"buttonText":"按钮",
"buttondisble":false

} } }</script>

1.4 数据传递子组件和父组件通信可以通过this.$emit将方法和数据传递给父组件。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">  <button-counter title="title1 : " @clicknow="clicknow"> <h2>hi...h2</h2> </button-counter>

<button-counter title="title2 : "></button-counter></div><script type="text/javascript">Vue.component('button-counter', {// 全局注册 props: ['title'],// 组件的属性 data: function () { return {

count: 0

} }, template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>', methods:{ clickfun : function () { this.count ++; this.$emit('clicknow', this.count);//通过this.$emit将方法和数据传递给父组件。 } }})var vm = new Vue({ el : "#app", data : {

}, methods:{ clicknow : function (e) {//处理组件的事件 console.log(e); } } components:{// 局部注册组件 test : { template:"<h2>h2...</h2>" } }});</script><style type="text/css">

</style></body></html>

1.5 组件的事件事件就是在指定的条件下触发某个js方法。

export default {
    methods: {
        goto(url) {
            console.log("按钮被点击了，且传入的参数是：" + url)
        }
    }
}

</script>

1.6 vue组件的生命周期beforeCreate：在实例初始化之前被调用created：在实例创建完成后被立即调用beforeMount：在挂载开始之前被调用mounted：挂载到实例上去之后调用，如果需要子组件完全挂载之后在执行操作可以使用$nextTickbeforeUpdate:数据更新时调用，发生在虚拟 DOM 打补丁之前updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子beforeDestroy:实例销毁之前调用。destroyed:Vue 实例销毁后调用。https://v3.cn.vuejs.org/guide...生命周期图示

II 组件的 data 选项和methods 选项2.1 组件的 data 选项组件的 data 选项是一个函数，Vue 会在创建新组件实例的过程中调用此函数。

const app = Vue.createApp({ data() {

return { count: 4 }

}})//传递给 createApp 的选项用于配置根组件

data()返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。它还为内部 property 保留 _ 前缀，所以避免使用这两个字符开头的顶级 data property 名称（该对象的任何顶级 property 也会直接通过组件实例暴露出来）。

const vm = app.mount('#app')//返回的是根组件实例console.log(vm.$data.count) // => 4console.log(vm.count) // => 4

2.2 methods 选项methods 选项向组件实例添加方法，可以在模板支持 JavaScript 表达式的任何地方调用。

const app = Vue.createApp({ data() {

return { count: 4 }

}, methods: {

increment() {
      //Vue 自动为 methods 绑定 this，`this` 指向该组件实例

  this.count++
}

}})

2.3 防抖(debounce) 和节流(throttling)响应跟不上触发频率的场景：鼠标移动事件onmousemove、滚动滚动条事件onscroll、窗口大小改变事件onresize、实时检查输入（绑定onkeyup事件发请求），瞬间的操作都会导致这些事件会被高频触发。如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。

debounce是针对响应跟不上触发频率这类问题的解决方案: 在时间周期内，当事件快速连续不断触发时，动作只会执行一次。但当触发间断大于我们设定的时间间隔时，动作就会有多次执行。

延迟debounce: 在周期结束时执行图片在这里插入图片描述前缘debounce（推荐）: 在周期开始时执行图片在这里插入图片描述Vue 没有内置支持防抖和节流，可以使用 Lodash 库来实现。

在生命周期钩子created 里添加该防抖函数,使组件实例彼此独立，不共享相同的防抖函数。

app.component('save-button', { created() {

// 使用 Lodash 实现防抖
this.debouncedClick = _.debounce(this.click, 500)

}, unmounted() {

// 移除组件时，取消定时器
this.debouncedClick.cancel()

}, methods: {

click() {
  // ... 响应点击 ...
}

}, template: `

<button @click="debouncedClick">
  Save
</button>

`})

III 计算属性包含响应式数据的复杂逻辑，应该使用计算属性。否则，模板不再是简单的和声明性的。

声明的方式创建了数据之间的依赖关系，更易于测试和理解。

<div id="computed-basics" class="demo"> <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span></div>//传递给 createApp 的选项用于配置根组件Vue.createApp({ data() {

return {
  author: {
    name: 'John Doe',
    books: ['Vue 2 - Advanced Guide',
      'Vue 3 - Basic Guide',
      'Vue 4 - The Mystery']
  }
}

}, computed: {

// a computed getter
publishedBooksMessage() {
  // `this` points to the vm instance
  return this.author.books.length > 0 ? 'Yes' : 'No'
}

}}).mount('#computed-basics')//挂载到 <div>3.1 计算属性的缓存机制计算属性将基于它们的响应依赖关系缓存，计算属性只会在相关响应式依赖发生改变时重新求值。

拿上面的例子来说，只要 author.books 没有发生改变，多次访问 publishedBookMessage 时计算属性会立即返回之前的计算结果，而不必再次执行函数。

3.2 计算属性的 Setter// ...computed: { fullName: {

// getter
get() {
  return this.firstName + ' ' + this.lastName
},
// setter
set(newValue) {
  const names = newValue.split(' ')
  this.firstName = names[0]
  this.lastName = names[names.length - 1]
}

}}

运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

IV 常见问题4.1 如何获取上个页面传递的数据在onLoad里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。