1. Các hàm vòng đời đầy đủ của thành phần

Mini Programs WeChat cung cấp các hàm vòng đời sau cho thành phần tùy chỉnh:

2. Các hàm vòng đời chính của thành phần

Trong thành phần Mini Programs, có 3 hàm vòng đời quan trọng nhất: created, attached, detached. Đặc điểm của từng hàm như sau:

• created: Được kích hoạt khi thể hiện thành phần vừa được tạo
• Lúc này chưa thể gọi setData
• Nên chỉ sử dụng để thêm các thuộc tính tùy chỉnh vào this của thành phần
• attached: Được kích hoạt khi thành phần hoàn tất khởi tạo và vào cây nút trang
• Lúc này, this.data đã được khởi tạo xong
• Đây là thời điểm lý tưởng cho hầu hết công việc khởi tạo (ví dụ: gửi yêu cầu để lấy dữ liệu ban đầu)
• detached: Được kích hoạt khi thành phần rời khỏi cây nút trang
• Thoát khỏi một trang sẽ kích hoạt hàm vòng đời detached của mỗi thành phần tùy chỉnh trong trang
• Thích hợp cho các công việc dọn dẹp

3. Node lifetimes

Trong thành phần Mini Programs, hàm vòng đời có thể được định nghĩa trực tiếp ở cấp tham số đầu tiên của hàm Component, hoặc khai báo trong trường lifetimes (cách được đề xuất và có độ ưu tiên cao).

Component({
  //Cách được đề xuất
  lifetimes:{
    attached(){}, //Thực thi khi thể hiện thành phần vào cây nút trang
    detached(){}  //Thực thi khi thể hiện thành phần bị loại khỏi cây nút trang
  },
  //Cách định nghĩa cũ
  attached(){}, //Thực thi khi thể hiện thành phần vào cây nút trang
  detached(){}  //Thực thi khi thể hiện thành phần bị loại khỏi cây nút trang
})

Vòng đời của trang chứa thành phần

1. Vòng đời của trang chứa thành phần là gì?

Đôi khi, hành vi của thành phần tùy chỉnh phụ thuộc vào sự thay đổi trạng thái trang, lúc này cần sử dụng vòng đời của trang chứa thành phần. Ví dụ: mỗi khi kích hoạt hàm vòng đời show của trang, chúng ta muốn tạo lại một giá trị màu RGB ngẫu nhiên.

Trong thành phần tùy chỉnh, có 3 hàm vòng đời của trang chứa thành phần:

2. Node pageLifetimes

Hàm vòng đời của trang chứa thành phần cần được định nghĩa trong node pageLifetimes:

Component({
  pageLifetimes:{
    show:function(){}, //Trang được hiển thị
    hide:function(){}, //Trang bị ẩn
    resize:function(size){} //Kích thước trang thay đổi
  }
})

3. Tạo giá trị màu RGB ngẫu nhiên

Component({
  pageLifetimes:{
    //Khi trang chứa thành phần được hiển thị, ngay lập tức gọi _randomColor để tạo màu ngẫu nhiên
    show:function(){
      this._randomColor()
    }, 
  },
methods: {
    //Phương pháp tạo màu RGB ngẫu nhiên, không phải hàm xử lý sự kiện, nên bắt đầu bằng _
    _randomColor(){
      this.setData({ //Gán lại giá trị cho trường dữ liệu _rgb trong data
        _rgb:{
          r:Math.floor(Math.random()*256),
          g:Math.floor(Math.random()*256),
          b:Math.floor(Math.random()*256)
        }
      })
    }
  }
})