Baylee的技术博客
0%

发表于 分类于

ref函数

  • 作用: 定义一个响应式的数据

  • 语法: 

    1
    const xxx = ref(initValue)
    • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
    • JS中操作数据： xxx.value
    • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>

  • 备注：

    • 接收的数据可以是：基本类型、也可以是对象类型。
    • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
    • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
    阅读全文 »

发表于 分类于

setup是Vue3.0中一个新的配置项，值为一个函数。

基本信息

  1. setup是所有Composition API（组合API）的容器。

  2. 组件中所用到的：数据、方法等等，均要配置在setup中。

  3. setup函数的两种返回值：

    1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
    2. 若返回一个渲染函数：则可以自定义渲染内容。

  4. setup执行的时机

    • 在beforeCreate之前执行一次，this是undefined。

  5. setup的参数

    • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    • context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit。
    阅读全文 »

发表于 分类于

一个路由（route）就是一组映射关系（key - value），key是路径，value是组件。多个路由需要路由器（router）进行管理。

基本使用

  1. 安装vue-router，命令：npm i vue-router

  2. 应用插件：Vue.use(VueRouter)

  3. 编写router配置项:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //引入VueRouter
    import VueRouter from 'vue-router'
    //引入Luyou 组件
    import About from '../components/About'
    import Home from '../components/Home'

    //创建router实例对象，去管理一组一组的路由规则
    const router = new VueRouter({
      routes:[
        {
          path:'/about',
          component:About
        },
        {
          path:'/home',
          component:Home
        }
      ]
    })

    //暴露router
    export default router

  4. 实现切换（active-class可配置高亮样式）

    阅读全文 »

发表于 分类于

基本使用

vue-class-component这个库主要用来方便以class的模式写Vue组件。

@component装饰器使类成为一个Vue组件，可以更加方便地编写Vue的配置项，方式如下：

  • data可以直接声明为类的属性；
  • methods可以直接声明为类的原型方法；
  • computed可以直接声明为类属性的getter和setter；
  • 所有Vue的生命周期钩子也可以直接声明为类的原型方法（但不能在实例上进行调用）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <OtherComponent />
</template>

import Vue from 'vue';
import Comonent from 'vue-class-component'
import OtherComponent from './OtherComponent.vue'

@Component({
  // 添加组件
  components: {
    OtherComponent
  }
})
// HelloWorld class will be a Vue component
export default class HelloWorld extends Vue {
	// 将data声明为类的属性	
	message = 'Hello world'
	
	// methods声明为类的方法
	printHello() {
		console.log(this.message)
	}
	
	// computed 声明为类的setter、getter
	set name(value) {
		this.message = value
	}
	get name() {
		return this.message
	}
	
	// 生命周期钩子
	mounted() {
	}
}
阅读全文 »

发表于 分类于

概念

  • documentElement是整个节点树的根节点，即<html>标签
  • body是DOM树对象的body子节点，即<body>标签

DTD

  • 页面具有DTD，或者说指定了DOCTYPE时，使用document.documentElement
  • 页面没有DTD时，使用document.body

为了兼容两种情况，通常兼容如下：

1
2
3
4
const scrollTop = windon.PageYOffset || 
document.documentElement.scrollTop || 
document.body.scrollTop || 
0;

通常在设置scrollTop时，也需要做区分。

阅读全文 »

发表于 分类于

插槽的作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

插槽的分类：默认插槽、具名插槽、作用域插槽

默认插槽

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 父组件 -->
  <Category>
     <div>html结构1</div>
  </Category>

<!-- 子组件 -->
  <template>
      <div>
         <!-- 定义插槽 -->
         <slot>插槽默认内容...</slot>
      </div>
  </template>
阅读全文 »

发表于 分类于

父子组件之间的通信方式：

  • 父组件通过props向子组件传递数据；
  • 子组件通过事件向父组件发送消息。
一、父组件向子组件传递数据

  1. 在子组件模板中的props中定义需要传值的属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    const cpn = {
      template: '#cpn',
      props: {
        cmessage: {
          type: String,
          default: 'default message',
          requird: true // 设置是否必传
        }，
        cmovies: {
          type: Array,
        	default:() =>[]
        }
      }
    }
    阅读全文 »

发表于 分类于

父组件访问子组件有两种方式：

  • 使用$children：得到一个子组件数组
  • 使用refs：得到一个对象

子组件访问父组件：

  • 使用$parent获取父组件

访问根组件：

阅读全文 »

发表于 分类于

静态派发 vs 动态派发

根据函数调用能否在编译时或运行时确定，可以将派发机制分成两种类型：

  • 静态派发：在编译期的时候，编译器就知道要为某个方法调用某种实现。因此, 编译器可以执行某些优化，甚至在可能的情况下，可以将某些代码转换成inline函数，从而使整体执行速度异常快。
  • 动态派发：一定量的运行时开销为代价，提高了语言的灵活性。在动态派发机制下，对于每个方法的调用，编译器必须在方法列表(witness table或virtial table)中查找执行方法的实现，如在运行时判断选择父类的实现，还是子类的实现。由于对象的内存都是在运行时分配的，因此只能在运行时执行检查。

编译型语言的函数派发方式

  1. 直接派发（Direct Dispatch）
    • 编译后就确定了方法的调用地址（也叫静态派发），汇编代码中，直接跳到方法的地址执行，生成的汇编指令最少，速度最快
    • 例如C语言，C++默认也是直接派发
    • 由于缺乏动态性，无法实现多态
      阅读全文 »

发表于 分类于

Swift类的对象创建和销毁

Swift中可以定义两种类：

Swift中类的实例对象都是在堆内存中创建的。系统会为类提供一个默认的init构造函数，如果想自定义构造函数，需要重写重载init函数。

类的实例对象的构建

  • 不像OC那样将alloc和init分开调用；

  • 直接使用 类型(初始化参数) 来完成实例对象的创建：let lily = Person("Lily")

  • 在编译时，系统为每个类的初始化方法生成一个：模块名.类名.__allocating_init(类名, 初始化参数) 的函数

    阅读全文 »