Vue.js在render函数中如何按需彻底移除contenteditable属性

问题核心原因 #

Vue 2 对contenteditable这类内置的特殊布尔属性有单独的渲染逻辑：当你给属性值传null/false时，不会直接移除属性，而是会渲染为contenteditable="false"，这和title这类普通属性的处理逻辑不同，所以你之前的两种方案都达不到预期。

可行解决方案 #

方案1：动态组装attrs对象，不需要时不包含该属性 #

直接在组装渲染参数的attrs对象时，只在需要启用编辑的场景下才加入contenteditable字段，不需要时该字段不存在，Vue会自动从DOM上移除对应属性。
示例代码：

data() {
  return {
    isContentEditable: true,
    title: "Title",
  };
},
methods: {
  handleClick() {
    this.isContentEditable = false;
    this.title = null;
  },
},
render(createElement) {
  const attrs = {
    id: "ID",
    title: this.title,
  };
  // 仅需要编辑时添加属性
  if (this.isContentEditable) {
    attrs.contenteditable = "true";
  }

  const options = {
    attrs,
    domProps: {
      innerHTML: "<p>Test</p>",
    },
    on: {
      click: this.handleClick,
    },
  };
  return createElement("div", options);
}

方案2：不需要时将属性值设为undefined #

如果不想动态组装attrs，可以在需要移除属性时，把对应的状态值设为undefined而非null，Vue遇到属性值为undefined时会直接移除对应属性。
示例代码：

data() {
  return {
    contenteditable: true,
    title: "Title",
  };
},
methods: {
  handleClick() {
    // 设为undefined而非null
    this.contenteditable = undefined;
    this.title = null;
  },
},
render(createElement) {
  const options = {
    attrs: {
      id: "ID",
      title: this.title,
      contenteditable: this.contenteditable,
    },
    domProps: {
      innerHTML: "<p>Test</p>",
    },
    on: {
      click: this.handleClick,
    },
  };
  return createElement("div", options);
}

内容的提问来源于stack exchange，提问作者Kuzzy